/* /assets/css/index-home.css */

.cp-scroll-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    padding: .25rem 0 .85rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .10) transparent;

    mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(100% - 86px),
        rgba(0, 0, 0, .92) calc(100% - 68px),
        rgba(0, 0, 0, .72) calc(100% - 48px),
        rgba(0, 0, 0, .42) calc(100% - 26px),
        rgba(0, 0, 0, .14) calc(100% - 10px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(100% - 86px),
        rgba(0, 0, 0, .92) calc(100% - 68px),
        rgba(0, 0, 0, .72) calc(100% - 48px),
        rgba(0, 0, 0, .42) calc(100% - 26px),
        rgba(0, 0, 0, .14) calc(100% - 10px),
        transparent 100%
    );
}

.cp-scroll-row:hover {
    scrollbar-color: rgba(255, 255, 255, .26) transparent;
}

.cp-scroll-row > a {
    flex: 0 0 calc((100% - .5rem) / 2.14);
    width: calc((100% - .5rem) / 2.14);
    min-width: calc((100% - .5rem) / 2.14);
    scroll-snap-align: start;
}

.cp-scroll-row::-webkit-scrollbar {
    height: 6px;
}

.cp-scroll-row::-webkit-scrollbar-track {
    background: transparent;
}

.cp-scroll-row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .10);
    border-radius: 999px;
}

.cp-scroll-row:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .26);
}

.cp-scroll-row::-webkit-scrollbar-button,
.cp-scroll-row::-webkit-scrollbar-button:single-button,
.cp-scroll-row::-webkit-scrollbar-button:horizontal,
.cp-scroll-row::-webkit-scrollbar-button:horizontal:decrement,
.cp-scroll-row::-webkit-scrollbar-button:horizontal:increment,
.cp-scroll-row::-webkit-scrollbar-button:horizontal:start,
.cp-scroll-row::-webkit-scrollbar-button:horizontal:end,
.cp-scroll-row::-webkit-scrollbar-button:start:decrement,
.cp-scroll-row::-webkit-scrollbar-button:end:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.cp-scroll-row::-webkit-scrollbar-corner {
    background: transparent !important;
}

@media (max-width: 575.98px) {
    .cp-scroll-row {
        mask-image: linear-gradient(
            90deg,
            #000 0%,
            #000 calc(100% - 54px),
            rgba(0, 0, 0, .82) calc(100% - 38px),
            rgba(0, 0, 0, .45) calc(100% - 18px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            #000 0%,
            #000 calc(100% - 54px),
            rgba(0, 0, 0, .82) calc(100% - 38px),
            rgba(0, 0, 0, .45) calc(100% - 18px),
            transparent 100%
        );
    }

    .cp-scroll-row > a {
        flex-basis: 82vw;
        width: 82vw;
        min-width: 82vw;
    }
}