/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1440,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.7813rem, 0.7302rem + 0.2554vw, 0.96rem);
    --step--1: clamp(0.9375rem, 0.8625rem + 0.375vw, 1.2rem);
    --step-0: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
    --step-1: clamp(1.35rem, 1.2rem + 0.75vw, 1.875rem);
    --step-2: clamp(1.62rem, 1.4132rem + 1.0339vw, 2.3438rem);
    --step-3: clamp(1.944rem, 1.6624rem + 1.4081vw, 2.9297rem);
    --step-4: clamp(2.3328rem, 1.953rem + 1.899vw, 3.6621rem);
    --step-5: clamp(2.7994rem, 2.2913rem + 2.5404vw, 4.5776rem);
}


/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1440,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --space-3xs: clamp(0.3125rem, 0.2946rem + 0.0893vw, 0.375rem);
    --space-2xs: clamp(0.5625rem, 0.5089rem + 0.2679vw, 0.75rem);
    --space-xs: clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem);
    --space-s: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
    --space-m: clamp(1.6875rem, 1.5268rem + 0.8036vw, 2.25rem);
    --space-l: clamp(2.25rem, 2.0357rem + 1.0714vw, 3rem);
    --space-xl: clamp(3.375rem, 3.0536rem + 1.6071vw, 4.5rem);
    --space-2xl: clamp(4.5rem, 4.0714rem + 2.1429vw, 6rem);
    --space-3xl: clamp(6.75rem, 6.1071rem + 3.2143vw, 9rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.1875rem + 0.625vw, 0.75rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4018rem + 0.8036vw, 1.125rem);
    --space-xs-s: clamp(0.875rem, 0.6964rem + 0.8929vw, 1.5rem);
    --space-s-m: clamp(1.125rem, 0.8036rem + 1.6071vw, 2.25rem);
    --space-m-l: clamp(1.6875rem, 1.3125rem + 1.875vw, 3rem);
    --space-l-xl: clamp(2.25rem, 1.6071rem + 3.2143vw, 4.5rem);
    --space-xl-2xl: clamp(3.375rem, 2.625rem + 3.75vw, 6rem);
    --space-2xl-3xl: clamp(4.5rem, 3.2143rem + 6.4286vw, 9rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.5893rem + 2.6786vw, 3rem);
}


/* @link https://utopia.fyi/grid/calculator?c=320,18,1.2,1440,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --grid-max-width: 93.00rem;
    --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6113rem + 2.5685vw, 3rem));
    --grid-columns: 12;
}

.u-container {
    max-width: var(--grid-max-width);
    padding-inline: var(--grid-gutter);
    margin-inline: auto;
}

.u-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-column-gap: var(--grid-gutter);
    >* {
        grid-column: span 12;
    }
}