full-bleed responsive hero

website/source/assets/stylesheets/_home.scss

@@ -45,12 +45,42 @@ $baseline: 20px;
   }
 
   header {
-    .hero {
-      margin: 140px auto 160px auto;
+    display: flex;
+    flex-direction: row;
+    background: url('../images/hero-image.svg') no-repeat;
+
+    @media (max-width: 991px) {
+      align-items: flex-end;
+      padding-top: 60%;
+      background-size: 80%;
+      background-position: top right;
       text-align: center;
+    }
+
+    @media (min-width: 992px) {
+      height: 400px;
+      text-align: left;
+      align-items: center;
+      background-size: 50%;
+      background-position: right;
+    }
+
+    @media (min-width: 1280px) {
+      height: 700px;
+    }
+
+    @media (min-width: 1800px) {
+      background-size: 1054px 700px;
+    }
+
+    .hero {
+      h1 {
+        font-weight: $font-weight-bold;
+        color: $black;
+      }
 
       .button {
-        margin: 5px;
+        margin: 5px 5px 5px 2px;
 
         @media (max-width: 768px) {
           display: block;

website/source/index.html.erb

@@ -8,7 +8,7 @@ description: |-
   <div class="container hero">
     <div class="row">
       <div class="col-md-6">
-        <%= inline_svg "logo-text.svg", height: 120, class: "logo" %>
+        <!-- <%= inline_svg "logo-text.svg", height: 120, class: "logo" %> -->
 
         <h1>
           Build Automated Machine Images
@@ -17,9 +17,7 @@ description: |-
         <a class="button primary" href="/intro/index.html">Get Started</a>
         <a class="button" href="/downloads.html">Download <%= latest_version %></a>
       </div>
-      <div class="col-md-6">
-        <%= inline_svg "hero-image.svg" %>
-      </div>
+
     </div>
   </div>
 </header>