1 files changed, 43 insertions, 28 deletions

diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index bfcdc16..6c497a1 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,35 +1,50 @@
-.c-hero {
-    margin-bottom: $line-height * 2em;
-    margin-left: -1 * $page--item-prefix--width;
-    padding-left: $page--item-prefix--width;
-    overflow: hidden;
-    font-family: $font-fam--mono;
+@include namespace('hero') {
+    @include store((
+        --colors: (
+            --back-fg: prop(--colors --bg-hi, $global: true)
+        )
+    ));
 
-    &::after {
-        content: str-repeat('░', 120);
-        display: block;
-        position: relative;
-        z-index: -10;
-        height: $line-height;
-        margin-top: px-to-em(2px);
-        margin-left: -1 * $page--item-prefix--width;
-        padding-top: px-to-em(2px);
-        border-top: 1px solid var(--fg-hi);
-        color: var(--fg-hi);
-        line-height: $code-block--line-height;
-    }
+    @include component(namespace()) {
+        display:         flex;
+        position:        relative;
+        flex-direction:  column;
+        align-items:     center;
+        justify-content: center;
+        text-align:      center;
 
-    &__pre {
-        margin-top: 0;
-        overflow: hidden;
-    }
+        @include element('title', 'backtitle') {
+            margin:         0 auto;
+            font-family:    $font-fam--large;
+            text-transform: none;
+        }
+
+        @include element('emph') {
+            color:       prop(--colors --accent, $global: true);
+            font-weight: 500;
+        }
+
+        @include element('title') {
+            max-width:   11em;
+            font-weight: 200;
+        }
+
+        @include element('backtitle') {
+            position:  absolute;
+            z-index:   -10;
+            transform: translateY(-.08em);
+            color:     prop(--colors --back-fg);
+        }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        margin-left: 0;
-        padding-left: 0;
+        @include iro-responsive-env(('xs', 'sm', 'md')) {
+            @include element('title') {
+                padding:   iro-responsive-set((7rem, 7rem, 10rem)) 0;
+                font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem));
+            }
 
-        &::after {
-            margin-left: 0;
+            @include element('backtitle') {
+                font-size: iro-responsive-set((12rem, 14rem, 16rem));
+            }
         }
     }
 }