.vitamino-product-gallery {
    display: grid !important;
    grid-template-columns: auto 84px;
    gap: 10px;
    height: 456px;

    @media(max-width: 1024px) {
        display: flex !important;
        flex-direction: column;
    }

    .image-slider {
        position: relative;
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        overflow-x: auto;
        display: flex;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
        &:hover {
            cursor:grab;
        }
        .slide {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            scroll-snap-align: center;

            img {
                height: 400px;
                width: auto;
                object-fit: contain;
            }
        }

    }



    .gallery {
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow-y: auto;
        scroll-behavior: smooth;

        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        @media(max-width: 1024px) {
            flex-direction: row;
            overflow-y: hidden;
            overflow-x: auto;
            height: 65px;
        }

        .gallery-image {
            width: 84px;
            height: 84px;
            object-fit: cover;
            background: #fff;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border: 1px solid transparent;

            &.active {
                border-color: var(--e-global-color-c0e3fa8);
            }

            @media(max-width: 1024px) {
                min-width: 54px;
                width: 54px;
                height: 54px;
            }

            &:hover {
                cursor: pointer;
            }

            img {
                height: 100%;
                width: auto;
            }
        }
    }
}