$hero-variations: ".hero-shade, .hero-blur, .hero-fade, .hero-gradient";

:is(#{$hero-variations}) {

    --_effect-intensity: unset;
    --_effect-color: unset;

    position: relative;
}

:is(div, section):is(.hero, #{$hero-variations}) {
    --_bg-img-url: url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1332&q=80);
    --_bg-img-size: cover;
    --_bg-img-repeat: no-repeat;
    --_bg-img-pos: center;

    --_hero-content-pos: center;

    // Default Values
    --_bg: var(--background);

    display: grid;
    place-items: center;
    align-content: center;
    grid-auto-rows: min-content;
    justify-content: center;

    width: var(--w-full);
    height: var(--h-screen);

    background-color: var(--_bg);
    background-image: var(--_bg-img-url);
    background-size: var(--_bg-img-size);
    background-repeat: var(--_bg-img-repeat);
    background-position: var(--_bg-img-pos);

    text-align: center;

    & section {
        
        z-index: 1;

        /* display: grid;
        grid-template-columns: 10% repeat(4, 1fr) 10%; */

        width: min(50%, 50dvw);
        height: auto;
        margin-inline: auto;
        margin-block: 0;


        & :is(h1, h2) {
    
            --_font-size: var(--lg);
            margin: 0;
            grid-column: 1 / 3;
        }
    
        & h1 {
            --_font-size: var(--lg);
            font-size: clamp(5rem, 1.25rem + 12vw, 8rem);
            color: var(--accent);

            --spacing: 0;
        }
    
        & h2 {
            --_spacing-y: var(--md);
            --_font-size: var(--md);
            font-size: clamp(1rem, -1.5rem + 8vw, 3rem);
            margin-block-end: var(--_spacing-y);
        }
    
        & p {
    
            font-size: clamp(0.8rem, 0.3rem + 1.6vw, 1.2rem);
            margin-block-end: var(--lg);
        }

        & button {

            --_spacing-y: var(--xs);

            margin-block-start: var(--_spacing-y);
        }
    }

}

:is(div, section).hero {

    :is(&-shade, &-gradient, &-blur)::before {

        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    &-shade {

        --_effect-intensity: 45%;
        --_effect-color: 0, 0, 0,;
        
        &::before {
        
            background-color: rgba(var(--_effect-color) var(--_effect-intensity));
        }
    }

    &-blur {

        --_effect-intensity: var(--xs); 

        
        &::before {
            //filter: blur(var(--_effect-intensity));
            backdrop-filter: blur(var(--_effect-intensity));
        }
    }

    &-gradient {

        --_effect-intensity: 20%;
        --_effect-color: var(--background);

        &::before {

            background-image: linear-gradient(
                to bottom,
                var(--_effect-color) var(--_effect-intensity),
                transparent 
            );
        }
    }
}

// Small adjustment for sticky headers