/* Explain: Container and section padding utilities for page layout. */
.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section {
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

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

.section--navy {
    background: var(--primary-color);
    color: #cfd4d9;
}

.section-head {
    max-width: 680px;
}

@media (min-width: 1024px) {
    .container {
        padding-inline: 2rem;
    }
}