hero updates and general layout work

site/assets/scss/elements/_layout.scss

@@ -1,5 +1,30 @@
+body {
+  min-width: 300px;
+}
+
 header,
-main,
 footer {
+  margin: 0;
   padding: 0;
 }
+
+main {
+  margin: 0 $gutter;
+  padding: 0;
+}
+
+@media screen and (min-width: 426px) {
+  footer,
+  main {
+    margin: 0 auto;
+    width: 425px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  footer,
+  main {
+    width: calc(100% * 0.809);
+    max-width: 860px;
+  }
+}

site/assets/scss/elements/_typography.scss

@@ -2,14 +2,13 @@ html,
 body {
   @include font-default;
   background-color: $light;
-  color: $black;
+  color: $copy-dark;
 }
 
 .h1,
 h1 {
   @include font-roboto;
   margin: 0 0 ($gutter / 2);
-  background-color: $light-grey;
   padding: 8px 0;
   width: 100%;
   font-size: 40px;
@@ -71,7 +70,8 @@ a {
 
   &:hover,
   &:active {
-    text-decoration: underline;
+    background-color: $white;
+    text-decoration: none;
     color: $dark-blue;
   }
 }