.mainBanner__wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}
.mainBanner__background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) brightness(0.6);
}
.mainBanner__title {
    position: relative;
    color: var(--Head-secondary);
    width: 100%;
}

.mainBanner__products {
    border-left: solid 1px var(--Stroke-secondary);
    transition: var(--Transition);
    background-color: var(--Background);

    &:hover {
        border-left-color: var(--Background);
    }
}
.mainBanner__products,
.mainBanner__content {
    position: relative;
    width: 50%;
    height: auto;
}
.mainBanner__products-wrapper,
.mainBanner__content-wrapper {
    width: calc( (var(--Container) / 2) );
    max-width: calc( (var(--Mobile-container) / 2) * 2 );
}
.mainBanner__content-wrapper {
    padding-top: var(--Padding-50);
    padding-right: var(--Padding-15);
    padding-bottom: var(--Padding-60);
    margin-left: auto;
}
.mainBanner__products-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-right: auto;
    padding-top: var(--Padding-40);
    padding-left: var(--Padding-50);
    padding-bottom: var(--Padding-50);
}

.mainBanner__advantages {
    margin-bottom: var(--Margin-40);
}
.mainBanner__advantages ul {
    gap: var(--Gap-10);
}
.mainBanner__advantages ul li {
    color: var(--Head-secondary);
}

.mainBanner__products-title {
    position: relative;
    margin-bottom: var(--Margin-30);
    color: var(--Main-text-secondary);
    transition: var(--Transition);
}
.mainBanner__product-item__title {
    position: relative;
    color: var(--Main-text-secondary);
    margin-bottom: var(--Margin-15);
    transition: var(--Transition);
}
.mainBanner__products__background-img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mainBanner__product-item__characteristics {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--Margin-30);
}
.mainBanner__product-item__characteristic {
    color: var(--Stroke-primary);
    transition: var(--Transition);
}

.mainBanner__product-item__price {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 5px;
    margin-bottom: var(--Margin-30);
}
.mainBanner__product-item__btn {
    margin-top: auto;
}

.mainBanner__product-item__btn {
    color: var(--Main-text-primary);
}
.mainBanner__product-item__btn svg path {
    fill: var(--Main-text-primary);
}
.mainBanner__products-swiper {
    width: 100%;
    flex-grow: 1;
}
.mainBanner__product-item {
    display: flex;
    flex-direction: column;
}
.mainBanner__products__background-blackout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 70%;
    height: 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.mainBanner__product-item__price > span.woocommerce-Price-amount > bdi,
.mainBanner__product-item__price > span.woocommerce-Price-amount > bdi > span,
.mainBanner__product-item__price ins span,
.mainBanner__product-item__price ins span bdi {
    color: var(--Head-secondary);
}
.mainBanner__product-item__price del {
    text-decoration: none;
}
.mainBanner__product-item__price del span {
    text-decoration: line-through;
    color: var(--Main-text-secondary);
}

.mainBanner__products:hover {
    & .mainBanner__products-wrapper .mainBanner__products-title,
    & .mainBanner__products-wrapper .mainBanner__product-item__title,
    & .mainBanner__products-wrapper .mainBanner__product-item__characteristic,
    & .mainBanner__product-item__btn {
        color: var(--Head-secondary);
    }

    & .mainBanner__product-item__btn svg {
        transform: rotate(45deg);
    }
    & .mainBanner__product-item__btn svg path {
        fill: var(--Head-secondary);
    }
}

.mainBanner__arrows {
    position: absolute;
    bottom: var(--Padding-50);
    right: 0px;
    z-index: 10;
}

.mainBanner__content-decor {
    position: absolute;
    bottom: var(--Padding-30);
    right: var(--Padding-30);
    width: clamp(60px, 43.1944px + 3.8194vw, 115px);
    height: auto;
    aspect-ratio: 115 / 120;
}

.mainBanner__decor {
    position: absolute;
    left: 0px;
    bottom: calc(var(--Padding-30) - 2px);
    transform: translateX(-5%);
    width: clamp(170px, 155.9444px + 3.1944vw, 216px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 200px;
    background-color: var(--Header-decor);
    filter: blur(130px);
    box-shadow: 0px 0px 20px 30px var(--Header-decor);
}

.mainBanner__advantages ul li {
    gap: var(--Gap-10);
}
.mainBanner__advantages ul li::before {
    width: 11px;
    margin-top: 0px;
}



.mainBanner__products__background-blackout {
    z-index: 2;
}
.mainBanner__products-wrapper {
    z-index: 3;
}



.mainBanner__products__background-swiper {
    position: absolute;
    /* top: 0px;
    left: 0px; */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 85%;
    height: 85%;
    
    & .mainBanner__products__background-slide {
        position: relative;
        width: 100%;
        height: 100%;
    }
    & .mainBanner__products__background-slide img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        /* object-fit: cover; */
        object-fit: contain;
        object-position: center;
    }
}



@media(max-width: 920px) {
    .mainBanner__wrapper {
        flex-direction: column;
    }
    .mainBanner__products,
    .mainBanner__content {
        width: 100%;
        height: 100%;
        padding-left: calc( (100% - var(--Mobile-container)) / 2 );
        padding-right: calc( (100% - var(--Mobile-container)) / 2 );
    }
    .mainBanner__content-wrapper,
    .mainBanner__products-wrapper {
        padding-left: 0px;
        padding-right: 0px;
        margin: 0px;
        width: 100%;
        max-width: 100%;
    }
    .mainBanner__products-swiper {
        width: 100%;
        max-width: 100%;
    }
}