#introduction {    
    color: white;
    padding-block: clamp(1.000rem, calc(-0.273rem + 6.364vw), 4.500rem);
    background:         
        linear-gradient(oklch(from var(--color-surface-darkest) l c h / 0.85)), 
        50% / cover image-set(
            url(/assets/images/heroes/home/mobile/home.jxl) type("image/jxl"),
            url(/assets/images/heroes/home/mobile/home.avif) type("image/avif"),
            url(/assets/images/heroes/home/mobile/home.webp) type("image/webp"),
            url(/assets/images/heroes/home/mobile/home.jpeg) type("image/jpeg")
        );


    & > .size-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }

    & h1 {
        font-size: clamp(1.500rem, calc(0.955rem + 2.727vw), 3.000rem);
        letter-spacing: 0.025em;
        line-height: 1;

        & span {
            color: var(--color-brand-orange);
        }
    }

    & h1 ~ p {
        font-size: clamp(0.875rem, calc(0.784rem + 0.455vw), 1.125rem);
    }

    & a {
        background-color: var(--color-brand-orange);
        color: white;
        text-decoration: none;
        font-weight: 600;
        padding: 0.875rem 1rem;
        font-size: clamp(0.875rem, calc(0.784rem + 0.455vw), 1.125rem);
        border-radius: 0.125rem;
    }

    @media (min-width: 37.5rem) {
        height: clamp(16.000rem, calc(10.182rem + 29.091vw), 32.000rem); 
        background:         
            linear-gradient(90deg, var(--color-surface-darkest) 10%,  transparent), 
            50% / cover image-set(
                url(../../images/heroes/home/tablet/home.jxl) type("image/jxl"),
                url(../../images/heroes/home/tablet/home.avif) type("image/avif"),
                url(../../images/heroes/home/tablet/home.webp) type("image/webp"),
                url(../../images/heroes/home/tablet/home.jpeg) type("image/jpeg")
            );

        & > .size-container { 
            text-align: start;
            align-items: start;
        }
    }

    @media (min-width: 70rem) {
        background:         
            linear-gradient(90deg, var(--color-surface-darkest) 40%,  transparent), 
            no-repeat 100% / cover image-set(
                url(../../images/heroes/home/desktop/home.jxl) type("image/jxl"),
                url(../../images/heroes/home/desktop/home.avif) type("image/avif"),
                url(../../images/heroes/home/desktop/home.webp) type("image/webp"),
                url(../../images/heroes/home/desktop/home.jpeg) type("image/jpeg")
            ),
            var(--color-surface-darkest);
    }

}

#abs-header-links a:nth-child(1) {
    background-color: var(--color-brand-orange);
    color: var(--color-background) !important;
}


#workarounds {
    & ul {
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        text-align: center;
        font-weight: 500;
    }
}

#abs-experience img {
    filter: saturate(0);
}

#reactivity {
    background-color: color-mix(in oklch, var(--color-background), var(--color-surface-darkest) 10%);
    padding-block: 2rem;

    & h2 {
        font-weight: 600;
        font-family: 'Inter';

        & span {
            color: var(--color-brand-orange);
        }
    }

    & .size-container {
        display: flex;
        gap: 1rem;
        align-items: center;

        & > div:last-child {
            flex-grow: 1;
            text-align: end;
        }
    }
}

:is(#workarounds, #improvement, #abs-experience) {
    padding-block: 2.5rem;

    & h2 {
        text-align: center;
        color: color-mix(in oklch, var(--color-foreground), var(--color-background) 50%);
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: 0.075em;
    }

    & .size-container {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
}


#improvement {
    


    & .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        border-radius: 0.5rem;
        aspect-ratio: 1;
        background-color: color-mix(in oklch, var(--color-surface-darkest), var(--color-background) 10%);
        color: color-mix(in oklch, var(--color-brand-orange), var(--color-background) 10%);
    }

    & ul {
        list-style-type: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.25rem, 1fr));
        gap: 1rem;

        & li {
            background-color: var(--color-surface-darkest);
            color: var(--color-background);
            padding: 1.5rem;
            border-radius: 0.375rem;

            & section {
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
                align-items: start;
            }


            & h3 {
                font-size: 1rem;
                text-wrap: balance;
                font-weight: 600;
                letter-spacing: 0.05em;
                line-height: 1.2;
            }

            & p {
                color: color-mix(in oklch, var(--color-background), var(--color-surface-darkest) 15%);
            }
        }
    }
}