@include namespace('hero') {
    @include store((
        --colors: (
            --emph-fg: prop(--colors --accent, $global: true),
            --back-fg: prop(--colors --bg-hi, $global: true)
        )
    ));

    @include component(namespace()) {
        display:         flex;
        position:        relative;
        align-items:     center;
        justify-content: center;
        text-align:      center;

        @include element('title') {
            margin-top:     0;
            font-family:    $font-fam--large;
            text-transform: none;

            @include modifier('front') {
                max-width:   7em;
                font-size:   2.5rem;
                font-weight: 200;
            }

            @include modifier('back') {
                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') {
                @include modifier('front') {
                    padding:   iro-responsive-set((7rem, 7rem, 10rem)) 0;
                    font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
                }

                @include modifier('back') {
                    font-size: iro-responsive-set((12rem, 14rem, 16rem));
                }
            }
        }
    }
}