:root {
    --gap: 10px;
    --per-page-512: 3;
    --per-page-768: 3;
    --per-page-1024: 3;
}

.cuscarousel {
    gap: var(--gap);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 1);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.cuscarousel::-webkit-scrollbar {
    height: 8px;
    background-color: var(--bg-scrollbar);
    border-radius: 99px;
}

.cuscarousel::-webkit-scrollbar-button {
    display: none;
}

.cuscarousel::-webkit-scrollbar-thumb {
    background-color: var(--thumb-color);
    border-radius: 5px;
}

@media screen and (min-width: 512px) {
    .cuscarousel {
        grid-auto-columns: calc(100% / var(--per-page-512));
    }
}

@media screen and (min-width: 768px) {
    .cuscarousel {
        grid-auto-columns: calc(100% / var(--per-page-768));
    }
}

@media screen and (min-width: 1024px) {
    .cuscarousel {
        grid-auto-columns: calc(100% / var(--per-page-1024) - var(--gap));
    }
}