horizontal-scroll {
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
    position: relative;
    user-select: none;
    -ms-overflow-style: none;
    width: 100%;
    box-sizing: border-box;
}

horizontal-scroll .scrollable-track {
    display: block;
    white-space: nowrap;
    scrollbar-width: none;
    position: relative;
    margin-bottom: 2em;
    > * {
            display: inline-grid;
            place-items: center;
    }
}

horizontal-scroll .scrollable-track {
    cursor: grab;
}

horizontal-scroll .scrollable-track > * {
    vertical-align: middle;
}

horizontal-scroll.active .scrollable-track {
    cursor: grabbing
}

horizontal-scroll.active .scrollable-track > * {
    pointer-events: none;
    user-select: none;
}

horizontal-scroll > img {
    pointer-events: none;
}
horizontal-scroll[paginated] {
}

horizontal-scroll[paginated]:not(.active) {
    /* scroll-snap-type: x proximity; */
}

horizontal-scroll[paginated] > * {
    /* scroll-snap-align: left; */
}

horizontal-scroll[paginated="center"] > * {
    /* scroll-snap-align: center; */
}

horizontal-scroll ul.pagination-controls {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50%;
    gap: .25em;
}

horizontal-scroll ul.pagination-controls li button {
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
    padding: 0;
    opacity: .3;
    transition: opacity .3s;
}

horizontal-scroll ul.pagination-controls li.current button {
    opacity: 1;
}