Horizontal scroll snap container

scroller.css

.scroll-snap-x-container {
    display:flex;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.scroll-snap-x-child {
    flex-shrink: 0;
    scroll-snap-align: center
}

.scroll-snap-x-container-4 {
    scroll-padding: 2rem;
}

.scroll-snap-x-child--start {
    scroll-snap-align: start
}

@media sm {
    .scroll-snap-x-container {
        display: block;
    }
}

.hide-scrollbar {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
}

.scroll-snap-x-container::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar
{
    display: none; /* for Chrome, Safari, and Opera */
}