.container {
    position: relative;
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
}

.swiper {
    position: relative;
    width: 100%;
    height: calc(var(--swiper-width) * var(--swiper-image-ratio) / 100%);
    overflow: visible;
    overflow-x: clip;
}

.swiper-slide {
    position: relative;
    width: var(--swiper-width);
    opacity: .5;
    transform: scale(.84);
    transition: all .3s ease-in-out;
    /* overflow: hidden; */
    border-radius: 0.4285rem;
}

.swiper-backface-hidden .swiper-slide {
    transform: scale(.84) translateZ(0);
    pointer-events: none;
}

.swiper-slide.swiper-slide-active {
    transform: scale(1) !important;
    opacity: 1 !important;
    pointer-events: all;
}

.swiper-backface-hidden .swiper-slide.swiper-slide-active {
    transform: scale(1) translateZ(0) !important;
}

.swiper-image {
    position: relative;
    width: 100%;
    padding-top: var(--swiper-image-ratio);
}
.swiper-image .product__wrap {
    background: var(--bg100);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: absolute;
    z-index: 9;
    top: 0;
    left: 50%;
    transform: translate(-50%, -35%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.product__wrap img {
    width: 65%;
    height: auto;
    /* transform: scale(0.8); */
}
.swiper-image .image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brand-orange);
    border-radius: 30px;
    display: flex;
    align-items: flex-end;
}

.swiper-image .image h3 {
    font-size: 20pt;
    text-transform: uppercase;
    font-family: var(--organic-font);
    color: var(--text100);
    text-align: center;
    padding: 0 var(--r16);
    /* transform: translateY(20px); */
}
.swiper-button-next,
.swiper-button-prev {
    padding: 8px;
    width: 12px;
    height: 12px;
    margin-top: 0;
    border-radius: 50%;
    position: absolute;

}

.swiper-button-next::after,
.swiper-button-prev::after {
    color: var(--brand-orange);
    font-size: 32px;
    font-weight: bold;
}

.swiper-button-next {
    /* transform: translate(100%, -50%); */
    right: 0;
}

.swiper-button-prev {
    left: 0;
}

@media only screen and (max-width: 768px) {
    .swiper {
        height: calc(var(--swiper-mobile-width) * var(--swiper-image-ratio) / 100%);
    }

    .swiper-slide {
        width: var(--swiper-mobile-width);
        transform: scale(var(--swiper-mobile-inactive-scale));
    }

    .swiper-backface-hidden .swiper-slide.swiper-slide {
        transform: scale(var(--swiper-mobile-inactive-scale)) translateZ(0);
    }

    .swiper-button-next {
        right: calc((100% - var(--swiper-mobile-width)) / 2);
    }

    .swiper-button-prev {
        left: calc((100% - var(--swiper-mobile-width)) / 2);
    }
}

@media only screen and (max-width: 768px) {
    .swiper {
        height: calc(50% * var(--swiper-image-ratio) / 100%);
    }

    .swiper-slide {
        width: var(--swiper-mobile-width);
        transform: scale(var(--swiper-mobile-inactive-scale));
    }

    .swiper-backface-hidden .swiper-slide.swiper-slide {
        transform: scale(var(--swiper-mobile-inactive-scale)) translateZ(0);
    }

    .swiper-button-next {
        right: calc((100% - var(--swiper-mobile-width)) / 2);
    }

    .swiper-button-prev {
        left: calc((100% - var(--swiper-mobile-width)) / 2);
    }
}
@media screen and (max-width: 560px) {   
    /* .container {            
            height: 100%;            
        } */
    .swiper-backface-hidden .swiper-slide.swiper-slide-active {
        transform: scale(0.7) translateZ(0) !important;
    }
        .swiper-image .product__wrap {
            width: 200px;
            height: 200px;           
        }
}