.service-navigation {
    padding: 1.25rem 0 0;
}

.service-navigation__track {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    padding: .15rem .15rem .75rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.service-navigation__back {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin: 0 0 .7rem;
    padding: .25rem 0;
    color: var(--color-marked);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.15;
}

.service-navigation__back:hover,
.service-navigation__back:focus-visible {
    color: var(--color-marked);
}

.service-navigation__back:focus-visible {
    outline: 3px solid var(--color-marked);
    outline-offset: 4px;
}

.service-navigation__link {
    display: inline-flex;
    min-height: var(--control-min-size);
    flex: 0 0 auto;
    gap: .65rem;
    align-items: center;
    padding: .7rem 1rem;
    border: var(--border-1);
    color: var(--color-title);
    background: transparent;
    font-size: .9rem;
    line-height: 1.15;
    scroll-snap-align: start;
    transition: color .2s ease, background-color .2s ease;
}

.service-navigation__link small {
    color: var(--color-marked);
    font-size: .72rem;
}

.service-navigation__link:hover,
.service-navigation__link:focus-visible,
.service-navigation__link.is-active {
    color: var(--color-white);
    background: var(--color-title);
}

.service-navigation__link:hover small,
.service-navigation__link:focus-visible small,
.service-navigation__link.is-active small {
    color: #9cc3ff;
}

.service-navigation__link:focus-visible {
    outline: 3px solid var(--color-marked);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .service-navigation {
        padding-top: .75rem;
    }

    .service-navigation .container {
        padding-right: 0;
    }

    .service-navigation__track {
        padding-right: var(--container-padding);
    }
}