.vh-mk-store-gallery {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

.vh-mk-store-gallery__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    justify-items: center;
}

.vh-mk-store-gallery__item {
    width: 100%;
    max-width: 18rem;
    min-width: 0;
    margin: 0;
}

.vh-mk-store-gallery__item--mobile-only,
.vh-mk-store-gallery__dots {
    display: none;
}

.vh-mk-store-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
}

.vh-mk-store-gallery__track:focus-visible {
    outline: 3px solid #231F20;
    outline-offset: 5px;
}

@media (max-width: 900px) {
    .vh-mk-store-gallery__track {
        display: flex;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .vh-mk-store-gallery__track::-webkit-scrollbar {
        display: none;
    }

    .vh-mk-store-gallery__item,
    .vh-mk-store-gallery__item--mobile-only {
        display: flex;
        flex: 0 0 100%;
        justify-content: center;
        max-width: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .vh-mk-store-gallery__item img {
        width: auto;
        /* Reserve space for the mobile header, slider dots and device safe area. */
        height: min(48.8rem, calc(100vh - 10rem - 30px - env(safe-area-inset-bottom, 0px)));
        height: min(48.8rem, calc(100svh - 10rem - 30px - env(safe-area-inset-bottom, 0px)));
        max-width: min(100%, 23rem);
        object-fit: contain;
    }

    .vh-mk-store-gallery__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .8rem;
        margin-top: 1.2rem;
    }

    .vh-mk-store-gallery__dots button {
        width: .85rem;
        height: .85rem;
        padding: 0;
        border: 2px solid #231F20;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }

    .vh-mk-store-gallery__dots button[aria-current="true"] {
        background: #231F20;
    }

    .vh-mk-store-gallery__dots button:focus-visible {
        outline: 3px solid #231F20;
        outline-offset: 3px;
        box-shadow: 0 0 0 6px #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vh-mk-store-gallery__track {
        scroll-behavior: auto;
    }
}