From 976c096122f21c9aab62a92c71dbcfd36b2863f4 Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Sun, 6 Nov 2016 22:46:35 +0100
Subject: [PATCH] =?UTF-8?q?[Update]=C2=A0Home:=20Lead=20text=20size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html             |  2 +-
 src/scss/_hero.scss    |  6 ++++++
 src/scss/_section.scss | 18 +++++++++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 2e5af3b..f89a763 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@ description: pages.home.description
 	<section class="section section--home-cta">
 		<div class="section__content">
 				<h2 class="section__title">{% t pages.home.video-heading %}</h2>
-				{% tmd pages.home.video-text %}
+				<div class="section__lead">{% tmd pages.home.video-text %}</div>
 
 				<div class="section__btn-grp">
 					<a href="https://www.youtube.com/watch?v=S0oNO3mbBE8" class="btn-blue btn-large" target="_blank" data-js-popup="video">{% t pages.home.video-btn %}</a>
diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss
index a35da77..fe02daa 100644
--- a/src/scss/_hero.scss
+++ b/src/scss/_hero.scss
@@ -21,6 +21,9 @@
 		&--grey {
 			background: $color-gray-light;
 		}
+		&--blue {
+			background: $color-blue;
+		}
 		&--grey-blue {
 			background: $color-gray-light-blueish;
 		}
@@ -36,6 +39,9 @@
 		margin: 0 auto;
 		position: relative;
 		z-index: 3;
+		@include mq($to: extrasmall) {
+			padding: 0;
+		}
 		@include mq($from: large) {
 			padding-top: 60px;
 			padding-bottom: 120px;
diff --git a/src/scss/_section.scss b/src/scss/_section.scss
index a234f7b..328d5ab 100644
--- a/src/scss/_section.scss
+++ b/src/scss/_section.scss
@@ -68,14 +68,26 @@ $m: 'section';
 		text-align: center;
 		padding-bottom: 60px;
 		width: 100%;
+		@include mq($to: small) { // optical
+			text-align: left;
+			padding: 0 30px;
+		}
+		@include mq($to: extrasmall) {
+			padding: 0;
+		}
 
 		.#{$m} {
 			&__title {
-				@include font-title-large();
+				@include font-title-xlarge();
 				margin-bottom: 20px;
 			}
+			&__lead {
+
+				@include font-lead();
+				color: $color-gray-dark;
+			}
 			&__btn-grp {
-				margin: 25px 0;
+				margin: 30px 0 20px;
 				@include mq($to: 600px) { // optical
 					& > * {
 						width: 100%;
@@ -83,7 +95,7 @@ $m: 'section';
 				}
 			}
 			&__content {
-				max-width: 800px;
+				max-width: 860px;
 			}
 		}
 	}