.card-slider {
    --scrollbar-thumb: #828386;
    --scrollbar-thumb-hover: #71767d
}

.card-slider-track {
    display: flex;
    gap: var(--card-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px
}

.card-slider-track::-webkit-scrollbar {
    height: 6px
}

.card-slider-track::-webkit-scrollbar-track {
    background: transparent
}

.card-slider-track::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
    -webkit-transition: background .3s ease;
    transition: background .3s ease
}

.card-slider-slide {
    flex: 0 0 var(--card-width,calc((100% - var(--card-gap) * (var(--slides-per-view) - 1)) / var(--slides-per-view)));
    min-width: var(--card-width,var(--fixed-card-width))
}

@media (max-width: 879px) {
    .card-slider-slide {
        flex:0 0 var(--card-width,var(--fixed-card-width))
    }
}