.main-carousel {
    --sb-track-color: #232e33;
    --sb-thumb-color: #44697a;
    --sb-size: 10px;
    
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: var(--sb-size);
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}

.main-carousel img,
.main-carousel iframe,
.main-carousel video {
    height: 240px;
    width: auto;
    object-fit: contain;
    vertical-align: bottom;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

@media (hover: hover) {
    .main-carousel::-webkit-scrollbar {
        height: var(--sb-size);
    }

    .main-carousel::-webkit-scrollbar-track {
        background: var(--sb-track-color);
        border-radius: 3px;
    }

    .main-carousel::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-color);
        border-radius: 3px;
    }
}