Working on hero section at mobile breakpoint.

src/layouts/index.html

@@ -30,7 +30,7 @@
   <div class="container hero-container">
     <div class="row">
       <div class="col">
-        <h1>Keep <span class="white">what</span><br><span style="float:right;"><span class="white">is</span> yours.</span></h1>
+        <h1>Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
       </div>
     </div>
     <div class="row">
@@ -39,13 +39,13 @@
       </div>
     </div>
   </div>
+</section>
   <div class="full-width-cta-container">
    {{- partial "full-width-cta.html" . -}}
   </div>
   <div class="hero-bottom">
 
   </div>
-</section>
 
 <!-- Teal Impact Section -->
 

src/static/css/buttons.css

@@ -241,7 +241,7 @@
   }
 
   .button-container{
-    padding: 0vw 8vw !important;
+    padding: 0vw 6.5vw !important;
   }
 
   .dev-count{

src/static/css/homepage.css

@@ -71,7 +71,7 @@
 
   .container{
     max-width: 1920px;
-    padding: 6.7vw 5vw;
+    padding: 5.4vw 3vw;
   }
 }
 
@@ -241,14 +241,23 @@ hr{
 @media only screen and (max-width: 576px) {
 
   .hero-section{
+    padding: 4vw !important;
+  }
+
+  .hero-container{
     background-image: url("/Images/small-grid.svg");
     background-position: top;
     background-repeat: repeat-y;
     background-size: cover;
+    padding-bottom: 16vw;
+  }
+
+  .hero-float{
+    float: none !important;
   }
 
   .hero-bottom{
-    height: 75px;
+    height:10vw;
   }
 
   .package_before{

src/static/css/typography.css

@@ -230,8 +230,8 @@ li{
 @media only screen and (max-width: 576px) {
 
   h1{
-    font-size: 24vw;
-    line-height: 22vw;
+    font-size: 21.5vw;
+    line-height: 20.4vw;
   }
 
   h2{
@@ -253,9 +253,8 @@ li{
   }
 
   .lead{
-    font-size: 28px !important;
-    line-height: 29px !important;
-    margin-bottom: 40px;
+    font-size: 4.800vw !important;
+    line-height: 5vw !important;
   }
 
   p{