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

/* Mobile: drop the gutter inset so containers span the full width. */
@media (max-width: 782px) {
    .container {
        width: 100%;
    }
}

.container--narrow {
    max-width: var(--container-narrow);
}

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

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

.section--dark {
    color: var(--color-white);
    background: var(--color-navy);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.content-grid {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
}

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

.entry-content > * + * {
    margin-top: 1.25rem;
}

.entry-content > .alignwide {
    max-width: var(--container);
}

/* Only bleed the wide block out of the narrow column once the viewport is wide
   enough to hold the full 1380px (container + gutters). Below that the negative
   margin would push content off-screen and force a horizontal scrollbar, so it
   simply stays column-width. */
@media (min-width: 1420px) {
    .entry-content > .alignwide {
        margin-inline: calc((var(--container-narrow) - var(--container)) / 2);
    }
}

.text-center {
    text-align: center;
}