Update _masthead.scss

Author: HWaymentSteele

_sass/layout/_masthead.scss

@@ -1,12 +1,13 @@
 // Styling for the masthead
 header.masthead {
+  position: relative;            // keep positioning predictable
   text-align: center;
   color: $primary;
   background-image: url("#{$header-image}");
   background-repeat: no-repeat;
   background-attachment: scroll;
-  background-position: center center; 
-  background-size: cover;
+  background-position: 35% center;   // left-center focus
+  background-size: cover;           // default for desktop
   .intro-text {
     padding-top: 150px;
     padding-bottom: 100px;
@@ -27,11 +28,31 @@ header.masthead {
   }
 }
 
+/* SMALL SCREENS: make width match viewport, reduce padding so image can scale */
+@media (max-width: 767.98px) {
+  header.masthead {
+    background-position: 30% center;  // slightly left on phones
+    background-size: 100% auto;       // force image width = viewport width, preserve aspect ratio
+    .intro-text {
+      padding-top: 80px;    // smaller paddings so header height isn't huge
+      padding-bottom: 60px;
+      .intro-lead-in {
+        font-size: 18px;
+        line-height: 20px;
+      }
+      .intro-heading {
+        font-size: 32px;
+        line-height: 36px;
+      }
+    }
+  }
+}
+
 @media (min-width: 768px) {
   header.masthead {
-    background-position: 35% center; 
+    /* desktop behavior */
+    background-position: 35% center;
     background-size: cover;
-
     .intro-text {
       padding-top: 300px;
       padding-bottom: 200px;