.shell {
    width: min(var(--container-width), calc(100% - (var(--page-gutter) * 2)));
    margin: 0 auto;
}

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

.page-section--muted {
    background: var(--color-surface);
}

.page-section--dark {
    background: var(--color-primary-deep);
    color: var(--color-on-primary);
}

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

.grid-three {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-four {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .grid-two,
    .grid-three,
    .grid-four {
        grid-template-columns: 1fr;
    }
}