Updating hero

css/index.css

@@ -292,7 +292,7 @@ code {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  padding: 0 2rem 2rem;
+  padding: 1rem 2rem 2rem;
   background: #FFF;
   border: 1px solid #FFF;
   border-radius: 2px;
@@ -404,6 +404,11 @@ code {
 }
 
 @media only screen and (min-width:48rem) {
+  .visible--lap {
+    display: block;
+    visibility: visible;
+  }
+
   .page-section--hero {
     padding-top: 2rem;
   }
@@ -418,11 +423,6 @@ code {
     margin-bottom: 2rem;
   }
 
-  .download-button {
-    display: block;
-    visibility: visible;
-  }
-
   .box,
   .box--first,
   .box--large,

index.html

@@ -26,13 +26,12 @@
 
                 <p class="p--hero start">
                 A grid system based on the <a href="http://caniuse.com/#search=flexbox"><code>flex</code></a> display property.
-                One less hack.
                 </p>
 
             </div>
 
             <div class="row center">
-                <a class="download-button invisible--hand" href="https://github.com/kristoferjoseph/flexboxgrid/archive/v0.1.0.zip">Download</a>
+                <a class="download-button invisible--hand visible--lap" href="https://github.com/kristoferjoseph/flexboxgrid/archive/v0.1.0.zip">Download</a>
             </div>
 
         </section>

src/style.css

@@ -57,7 +57,7 @@ code {
 }
 .page-section--hero {
   box-sizing: border-box;
-  padding: 0 2rem 2rem 2rem;
+  padding: 1rem 2rem 2rem 2rem;
   background: #FFF;
   border: 1px solid #FFF;
   border-radius: 2px;
@@ -145,6 +145,11 @@ code {
 }
 @media only screen and (min-width: 48rem) {
 
+     .visible--lap {
+       display: block;
+       visibility: visible;
+     }
+
     .page-section--hero {
       padding-top: 2rem;
     }
@@ -156,10 +161,6 @@ code {
       font-size: 1.25rem;
       margin-bottom: 2rem;
     }
-    .download-button {
-      display: block;
-      visibility: visible;
-    }
     .box--row, .box--first, .box--nested, .box--large, .box {
       padding: 1rem;
     }