:where(.section-nav) {
    background-image: linear-gradient(to right, var(--color-brand-pale-blue), var(--color-brand-peach));

    .section-nav-list {
        gap: 3rem;
        flex-wrap: wrap;
        align-items: center;
        padding-block: 1.6rem;
        /* margin-block only — leave margin-inline to .region's auto-centering */
        margin-block: 0;
        /* the .region class is reused for centering; drop the simple-hero region border */
        border-bottom: 0;
    }

    .section-nav-link {
        font-size: 1.6rem;
        color: var(--color-brand-navy);
        text-decoration: none;
        line-height: 1.2;

        &:where(:hover, :focus-visible) {
            text-decoration: underline;
        }

        &.is-current {
            font-weight: 700;
        }
    }
}

@media screen and (max-width: 60em) {
    :where(.section-nav) {
        .section-nav-list {
            gap: 1.6rem 2.4rem;
        }
    }
}