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