.rrota-terms-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    @media (max-width: 767px) {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;

        &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 60px;            /* only the fade area */
            height: 50px;
            pointer-events: none;
            z-index: 5;
            background: linear-gradient(
                90deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,1) 100%
            );
        }
    }
}

.rrota-terms-nav a {
    padding: 15px 35px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-stroke);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 450;
    line-height: 27px;
    transition: all .25s ease;
    @media (max-width: 767px) {
        font-size: 14px;
        padding: 10px 15px;
        white-space: nowrap;
        overflow-y: none;
    }
}

.rrota-terms-nav a:hover,
.rrota-terms-nav a.active {
    background-color: var(--e-global-color-accent);
    border-color: var(--e-global-color-accent);
    color: #FFF !important;
}