/* Layer 4: containers, sections, grids. The only breakpoint is 900px. */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.section--mint {
    background: var(--c-mint);
}

.section--dark {
    background: var(--c-dark);
    color: var(--c-dark-contrast);
}

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

.section__head {
    display: grid;
    gap: var(--space-3);
    max-width: 760px;
    margin-bottom: var(--space-6);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.section__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-primary);
}

.section__lead {
    font-size: var(--fs-l);
    color: var(--c-muted);
}

.section--dark .section__eyebrow { color: var(--c-dark-muted); }
.section--dark .section__lead { color: var(--c-dark-muted); }

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

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

.stack {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.stack--s { gap: var(--space-2); }
.stack--l { gap: var(--space-6); }

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

@media (min-width: 900px) {
    .section {
        padding-block: var(--space-9);
    }

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

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

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

    .split--7-5 { grid-template-columns: 7fr 5fr; }
    .split--5-7 { grid-template-columns: 5fr 7fr; }
    .split--8-4 { grid-template-columns: 8fr 4fr; }
    .split--top { align-items: start; }
}