:where(.navigation-sticky *) {
    margin-top: 0;
}

.navigation-sticky {
    --link-color: var(--color-white);
    --link-underline: underline;
    background-color: var(--_bg-color, var(--color-gray-800));
    padding-inline: var(--content-gutters);
    padding-block: 1rem;
    margin-block: 0;
}

@media (width >= 37.5rem) {
    .navigation-sticky {
        position: sticky;
        top: 5rem;
        z-index: 999;
    }

        .navigation-sticky select {
            display: none;
        }
}

.navigation-sticky__wrapper {
    margin-inline: auto;
    max-width: var(--content-width);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2.5rem;
}

.navigation-sticky__link {
    text-align: center;
    text-underline-offset: 0.125rem;
}

@media (width < 37.5rem) {
    .navigation-sticky select {
        color: var(--link-color);
        display: block;
        appearance: none;
        font-size: var(--button-font-size);
        font-weight: 700;
        padding-block: 0.5rem;
        padding-inline: 0 1.75rem;
        border: none;
        border-block-end: solid 1px currentColor;
        width: 100%;
        margin-block-start: 0;
        background: transparent url('data:image/svg+xml,<svg width="12" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9 .804 0h10.392L6 9Z" fill="%23FFF"/></svg>') 100% 50% / 0.75rem auto no-repeat;
    }

        .navigation-sticky select:focus:not(:focus-visible) {
            outline: none;
        }

        .navigation-sticky select option {
            color: var(--color-black);
        }

    .navigation-sticky__link {
        display: none;
    }
}