/*
--breakpoints-mks-product-sm 640px
--breakpoints-mks-product-md 768px
--breakpoints-mks-product-lg 1024px
--breakpoints-mks-product-xl 1280px
--breakpoints-mks-product-2xl 1536px
--container-max-width-sm
--container-max-width-md
--container-max-width-lg
--container-max-width-xl
--container-max-width-2xl
 */


.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: contain;
    background-position: center;
}

.mySwiper2 {
    overflow: hidden;
    aspect-ratio: 1/1;
    height: auto;
    width: 100%;
}

.mySwiper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: calc(100%);
    padding: 2.5rem 0;
}

.mySwiper .swiper-wrapper {
}

.mySwiper .swiper-slide {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    opacity: 0.4;
}

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

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mySwiper2 .swiper-slide img {
    object-fit: cover;
}

.advanced-slider {
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: 1fr;
    gap: 1.25rem;
    width: 100%;
    height: calc((1300px - 1.25rem) / 2 - (1.25rem + 8rem));
}


.advanced-slider .mySwiper {
    position: relative;
}

.advanced-slider .swiper--next, .advanced-slider .swiper--prev {
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--mks-color-primary-600);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
}

.advanced-slider .swiper--prev {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.advanced-slider .swiper--next {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.advanced-slider .swiper--next span.material-symbols-outlined, .advanced-slider .swiper--prev span.material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--mks-color-primary-50);
}

.swiper-slide--img {
    position: relative;
    cursor: zoom-in;
}

.video-container::after {
    content: "";
    background: transparent;
    width: 100%;
    height: 100%;
    min-height: 1px;
    position: absolute;
    top: 0;
}

.swiper-slide--img:hover::after {
    content: "zoom_in";
    position: absolute;
    font-family: "Material Symbols Outlined";
    font-size: 2rem;
    color: var(--mks-color-neutral-950);
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.image-popup--active {
    display: flex;
}

.image-popup * {
    z-index: 2;
}

.image-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100svw;
    height: 100svh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    cursor: zoom-out;
}

.image-popup__content {
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.image-popup__content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
    cursor: zoom-out;
}

.image-popup__close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    background: var(--mks-color-neutral-950);
    color: var(--mks-color-neutral-50);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
}

.image-popup__prev, .image-popup__next {
    position: absolute;
    top: 50%;
    background: var(--mks-color-primary-600);
    color: var(--mks-color-neutral-50);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    z-index: 3;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.image-popup__prev {
    left: 2rem;
}

.image-popup__next {
    right: 2rem;
}

.image-popup__content .mySwiper3 {
    width: 100%;
    height: 100%;
}

.image-popup__content .mySwiper3 .swiper-slide {
    background: transparent;
}

/*
.advanced-slider .swiper--prev {
    top: -2.5rem;
}

.advanced-slider .swiper--next {
    bottom: -2.5rem;
}*/


@media screen and (max-width: 991px) {
    .advanced-slider:not(.advanced-slider--mobile) {
        display: none;
    }
    .advanced-slider {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 0.5rem;
    }

    .mySwiper4 .swiper-slide {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
    }

    .advanced-slider .swiper--prev {
        left: 1rem;
        right: unset;
        top: 50%;
        transform: translateY(-50%);
    }

    .advanced-slider .swiper--next {
        right: 1rem;
        left: unset;
        top: 50%;
        transform: translateY(-50%);
    }
}