1 files changed, 24 insertions, 21 deletions

diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index 6c497a1..3d8890e 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,6 +1,7 @@
 @include namespace('hero') {
     @include store((
         --colors: (
+            --emph-fg: prop(--colors --accent, $global: true),
             --back-fg: prop(--colors --bg-hi, $global: true)
         )
     ));
@@ -8,42 +9,44 @@
     @include component(namespace()) {
         display:         flex;
         position:        relative;
-        flex-direction:  column;
         align-items:     center;
         justify-content: center;
         text-align:      center;
 
-        @include element('title', 'backtitle') {
-            margin:         0 auto;
+        @include element('title') {
+            margin-top:     0;
             font-family:    $font-fam--large;
             text-transform: none;
-        }
 
-        @include element('emph') {
-            color:       prop(--colors --accent, $global: true);
-            font-weight: 500;
-        }
+            @include modifier('front') {
+                max-width:   7em;
+                font-size:   2.5rem;
+                font-weight: 200;
+            }
 
-        @include element('title') {
-            max-width:   11em;
-            font-weight: 200;
+            @include modifier('back') {
+                position:  absolute;
+                z-index:   -10;
+                transform: translateY(-.08em);
+                color:     prop(--colors --back-fg);
+            }
         }
 
-        @include element('backtitle') {
-            position:  absolute;
-            z-index:   -10;
-            transform: translateY(-.08em);
-            color:     prop(--colors --back-fg);
+        @include element('emph') {
+            color:       prop(--colors --emph-fg);
+            font-weight: 500;
         }
 
         @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));
-            }
+                @include modifier('front') {
+                    padding:   iro-responsive-set((7rem, 7rem, 10rem)) 0;
+                    font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
+                }
 
-            @include element('backtitle') {
-                font-size: iro-responsive-set((12rem, 14rem, 16rem));
+                @include modifier('back') {
+                    font-size: iro-responsive-set((12rem, 14rem, 16rem));
+                }
             }
         }
     }