@layer layout {
    .container {
        --container-size: var(--container-default);
        --container-gutter: var(--space-4);

        inline-size: min(calc(100% - (var(--container-gutter) * 2)), var(--container-size));
        margin-inline: auto;
    }

    .container--narrow {
        --container-size: var(--container-narrow);
    }

    .container--wide {
        --container-size: var(--container-wide);
    }

    .section {
        padding-block: var(--space-12);
    }

    .section--compact {
        padding-block: var(--space-8);
    }

    .section--spacious {
        padding-block: var(--space-16);
    }

    .grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .stack--xs {
        gap: var(--space-2);
    }

    .stack--sm {
        gap: var(--space-3);
    }

    .stack--lg {
        gap: var(--space-8);
    }

    .cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
    }

    @media (min-width: 48rem) {
        .container {
            --container-gutter: var(--space-6);
        }

        .section {
            padding-block: var(--space-16);
        }

        .section--compact {
            padding-block: var(--space-10);
        }

        .section--spacious {
            padding-block: var(--space-20);
        }
    }

    @media (min-width: 64rem) {
        .container {
            --container-gutter: var(--space-8);
        }

        .section {
            padding-block: var(--space-20);
        }

        .section--compact {
            padding-block: var(--space-12);
        }

        .section--spacious {
            padding-block: var(--space-24);
        }

        .grid--split {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: var(--space-8);
        }
    }
}