.SwiperImages {
    --swiper-theme-color: #000;
    --swiper-navigation-size: 32px;

    .SwiperImages__main,
    .SwiperImages__thumbs {
        overflow: hidden;
    }

    .SwiperImages__slide {
        background-color: #fff;

        img {
            display: block;
            width: 100%;
        }
    }

    .SwiperImages__main {
        position: relative;

        img.cursor-enlarge {
         cursor: zoom-in;
        }

        &:not(.swiper-initialized) {
            aspect-ratio: var(--_aspect-ratio);
        }
    }

    .SwiperImages__prev,
    .SwiperImages__next {
        position: absolute;
        top: 50%;
        z-index: +1;
        transform: translateY(-50%);
        padding: 1rem 1rem 1rem 8px;
        border-radius: 2px;
        cursor: pointer;
        opacity: .5;

        &:hover {
            opacity: 1;
        }

        .icon {
            box-sizing: content-box;
            height: 1rem;
            width: 1rem;
            border: .35em solid transparent;
            border-radius: 2px;
            background: rgb(20 20 20 / .8);
        }
    }

    .SwiperImages__next {
        right: 0;
        padding: 1rem 8px 1rem 1rem;
    }

    .SwiperImages__thumbs {
        padding: 10px 0;

        .SwiperImages__wrapper {
            display: flex;
        }

        .SwiperImages__slide {
            width: 25%;
            opacity: 0.4;

            &:not(:last-child) {
                margin-right: 10px;
            }
        }

        .swiper-slide-thumb-active {
            opacity: 1;
        }
    }

    *:has(> &) {
        min-width: 0;
    }
}