.gallery__product-view-vertical {
    display: flex;
    gap: 1rem;
    container-type: inline-size;
    width: 100%;
    height: 25cqw;
    --thumb-size: 4.375rem;
    --thumb-whitespace: .5rem;
    user-select: none;
    position: relative;
    align-items: center;

    .thumbnails {
        &:not(.swiper-initialized) .swiper-wrapper {
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .swiper-slide {
                height: calc(25% - var(--thumb-whitespace));
                margin-bottom: calc(var(--thumb-whitespace) * 4 / 3);
                @media (max-width: 860px) {
                    height: 100%;
                    width: calc(25% - var(--thumb-whitespace));
                    margin-bottom: unset;
                    margin-right: calc(var(--thumb-whitespace) * 4 / 3);
                }
            }
            @media (max-width: 860px) {
                flex-direction: row;
            }
        }
        --border-size: 2px;

        width: var(--thumb-size);
        min-width: var(--thumb-size);
        max-width: var(--thumb-size);
        height: calc(100% - var(--swiper-navigation-size, 2.75rem) * 2 - calc(var(--thumb-whitespace) * 2));
        padding: 2px;

        @media (max-width: 860px) {
            width: calc(100cqw - (1.875rem * 2));
            min-width: calc(100cqw - (1.875rem * 2));
            max-width: calc(100cqw - (1.875rem * 2));
            height: 140px;
        }
        .swiper-slide-thumb-active {
            border: var(--border-size) solid var(--blue);
        }

        .swiper-slide:not(.swiper-slide-thumb-active) {
            border: var(--border-size) solid var(--color-gray);
        }

        .swiper-slide:hover {
            border-color: var(--color-dark-gray);
        }
    }

    .gallery {
        width: calc(100% - var(--thumb-size));
        height: 100%;
        margin-bottom: 0;
        .swiper-slide:hover {
            background-color: var(--color-gray-60);
        }
        img {
            min-height: 100%;
        }
    }

    .swiper-slide {
        container-type: inline-size;
        cursor: pointer;
        border-radius: .5rem;
        padding: .2rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .2s linear;


        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: flex;
            mix-blend-mode: multiply;
        }
    }

    .swiper-button-prev {
        top: 0;
        left: 0;
        transform: rotate(180deg) translateX(calc(var(--thumb-size) / 2 * -1 ));
        color: var(--color-black);
        margin-top: 0;
        @media (max-width: 860px) {
            top: unset;
            bottom: 25px;
            left: 0;
            transform: rotate(90deg) translateX(calc(var(--thumb-size) / 2 * -1 ));
        }
    }

    .swiper-button-next {
        bottom: 0;
        left: 0;
        transform: translateX(calc(var(--thumb-size) / 2 ));
        top: unset;
        @media (max-width: 860px) {
            bottom: 25px;
            left: unset;
            right: 0;
            transform: rotate(-90deg) translateX(calc(var(--thumb-size) / 2 ));
        }
    }
    
    @media (max-width: 1550px) {
        height: 28cqw;
    }
    @media (max-width: 1270px) {
        height: 34cqw;
    }
    @media (max-width: 1080px) {
        height: 50cqw;
    }
    @media (max-width: 860px) {
        flex-direction: column-reverse;
        height: unset;
    }
}