#gatesMobileScroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    #gatesMobileScroll::-webkit-scrollbar {
        display: none;
    }

.gates-mobile-arrow {
    padding: 0.3rem;
    position: absolute;
    top: 0;
    width: auto;
    height: 100%;
    z-index: 1;
}

#gates-mobile-arrow-left {
    left: 0;
}

#gates-mobile-arrow-right {
    right: 0;
}


    #gates-mobile-arrow-right:before, #gates-mobile-arrow-left:before {
        z-index: -1;
        content: "";
        position: absolute;
        width: 75px;
        height: 100%;
        top: 0;
    }

    #gates-mobile-arrow-right:before {
        right: 0px;
        background: linear-gradient(to right, color-mix(in srgb, var(--swift-background-color) 0%, transparent) 0%, color-mix(in srgb, var(--swift-background-color) 100%, transparent) 100%);
    }

#gates-mobile-arrow-left:before {
    left: 0px;
    background: linear-gradient(to left,color-mix(in srgb, var(--swift-background-color) 0%, transparent) 0%, color-mix(in srgb, var(--swift-background-color) 100%, transparent) 100%);
}


.prev, .next {
    display: block;
    height: 100%;
    width: auto;
    color: white;
    transition: 0.6s ease;
    user-select: none;
    text-decoration: none;
}

.gates-mobile-arrow-icon {
    color: var(--swift-foreground-color);
}