hero updates and general layout work

site/assets/scss/components/_hero.scss

@@ -1,9 +1,62 @@
 .hero {
+  display: flex;
   position: relative;
-  margin: 0;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 ($gutter * 2);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   padding: 0;
   height: 250px;
+
+  h1 {
+    flex: 1 1 auto;
+    background-color: rgba($blue, 0.75);
+    padding: $gutter;
+    width: auto;
+    text-align: center;
+    color: $copy-light;
+  }
+
+  .blue {
+    background-color: rgba($blue, 0.75);
+  }
+
+  .dark-blue {
+    background-color: rgba($dark-blue, 0.75);
+  }
+
+  .yellow {
+    background-color: rgba($yellow, 0.75);
+    color: $copy-dark;
+  }
+
+  .orange {
+    background-color: rgba($orange, 0.75);
+  }
+
+  .red {
+    background-color: rgba($red, 0.75);
+  }
+}
+
+@media screen and (min-width: 426px) {
+  .hero {
+    h1 {
+      flex: 0 0 auto;
+      width: 425px;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .hero {
+    h1 {
+      width: calc(100% * 0.809);
+      max-width: 860px;
+      text-align: inherit;
+    }
+  }
 }

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;
   }
 }

site/assets/scss/settings/_colors.scss

@@ -9,3 +9,6 @@ $orange:     rgba(233, 114, 76,  1);
 $red:        rgba(197, 40,  61,  1);
 $blue:       rgba(37,  95,  133, 1);
 $dark-blue:  rgba(24,  48,  89,  1);
+
+$copy-light: $white;
+$copy-dark: $black;