/* ==========================
   Layout foundations
========================== */

:root {
    --layout-max-width: 1440px;
    --layout-gutter: clamp(1.25rem, 4vw, 5rem);
    --section-space: clamp(3rem, 6vw, 6rem);
    --section-space-hero: clamp(3rem, 5vw, 5rem);
    --section-space-compact: clamp(2.75rem, 4.5vw, 4rem);
    --section-space-small: clamp(2.5rem, 4vw, 3.75rem);
    --site-top-band-height: clamp(1rem, 2.6vw, 2.25rem);
    --eyebrow-heading-offset: clamp(0.5rem, 1vw, 1.25rem);
}

/* ==========================
   Containers
========================== */

.container {
    width: min(
        calc(100% - (var(--layout-gutter) * 2)),
        var(--layout-max-width)
    );
    margin-inline: auto;
}

.container--wide {
    --layout-max-width: 1440px;
}

.container--default {
    --layout-max-width: 1280px;
}

.container--narrow {
    --layout-max-width: 960px;
}

.container--text {
    --layout-max-width: 720px;
}

.container--full {
    width: 100%;
    max-width: none;
}

/* ==========================
   Sections
========================== */

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

.section--compact {
    padding-block: clamp(3rem, 5vw, 5rem);
}

.section--flush {
    padding-block: 0;
}

/* ==========================
   Generic grids
========================== */

.grid {
    display: grid;
    gap: clamp(2rem, 4vw, 5rem);
}

.grid--two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ==========================
   Responsive layout
========================== */

@media (max-width: 900px) {
    :root {
        --layout-gutter: clamp(1.25rem, 5vw, 2.5rem);
    }

    .grid--two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    :root {
        --layout-gutter: 1.25rem;
    }
}