add hero layout styles

site/layouts/partials/hero.html

@@ -1,6 +1,13 @@
 <article id="home">
-  <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden hero-bg">
-    <div class="block-container block-grid">
+  <div class="l-screen-full hero-bg">
+    <div class="hero">
+      <div class="hero__body">
+        <h2 class="hero-title">How We Can Help You</h2>
+          <p class="h4">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
+      </div>
+      <div id="js-block-parent" class="hero__aside block-grid">
+        {{ partial "blocks.html" }}
+      </div>
     </div>
   </div>
 </article>

src/css/imports/hero.scss

@@ -0,0 +1,80 @@
+.hero {
+  z-index: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: 64px;
+    text-align: center;
+  }
+
+  @media (max-width: $bp-hero) {
+    &__body,
+    &__aside {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    &__body {
+      z-index: 10;
+    }
+
+    &__aside {
+      z-index: 5;
+    }
+  }
+
+  @media (min-width: $bp-hero) {
+    display: flex;
+    flex-direction: row;
+
+    &__body,
+    &__aside {
+      flex: 0 0 50%;
+    }
+
+    &__body {
+    }
+
+    &__aside {
+    }
+  }
+}
+
+.hero-title {
+  margin-bottom: 1.25rem;
+}
+
+.hero__body {
+  background-color: rgba(yellow, 0.2);
+}
+
+.hero__aside {
+  background-color: red;
+}
+
+.block-grid {
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .c-block-tr {
+    grid-column: 3/4;
+    grid-row: 1/3;
+  }
+
+  .c-block-br {
+    grid-column: 2/4;
+    grid-row: 3/3;
+  }
+}
+

src/css/imports/variables.scss

@@ -6,6 +6,8 @@ $bp-l: 80em;
 $bp-footer-s: 28em;
 $bp-footer-m: 60em;
 
+$bp-hero: $bp-m;
+
 $z-index__header: 100;
 
 :root {

src/css/main.css

@@ -12,6 +12,8 @@
 
 @import "imports/components/base.scss";
 
+@import "imports/hero.scss";
+
 @import "mapbox-gl/dist/mapbox-gl.css";
 
 // swup transition classes
@@ -383,35 +385,6 @@ html.is-animating .transition-fade {
   margin-bottom: 1.25rem;
 }
 
-// hero
-
-.block-container {
-  position: relative;
-  width: 100%;
-  max-width: 110rem;
-  height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-
-  background-color: rgba(#000, 0.1);
-}
-
-.block-grid {
-  display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  .c-block-tr {
-    grid-column: 3/4;
-    grid-row: 1/3;
-  }
-
-  .c-block-br {
-    grid-column: 2/4;
-    grid-row: 3/3;
-  }
-}
-
 // global
 
 .site-title {