.banner-product-wrap.has-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
}

.banner-product__img {
    border-radius: 4rem;
    overflow: hidden;
    order: 100;
    position: relative;
}

.banner-product__img:after {
    content: "";
    background: rgb(255 255 255 / 1%) none repeat scroll 0 0;
    inset: 0;
    opacity: 0;
    position: absolute;
    z-index: 1;
    transition: all 700ms ease 0s;
    -webkit-transition: all 700ms ease 0s;
    border: 1px solid var(--c-white);
    border-radius: 4rem;
}

.desktop .banner-product__img:hover:after {
    /* bottom: 50%; */
    opacity: 1;
    inset: 1rem;
    border-radius: 3rem;
    /* top: 50%; */
}

.desktop .banner-product__img:hover img {
    transform: scale(0.99);
}

.banner-product__img img {
    width: 100%;
    border-radius: 4rem;
    height: 100%;
    object-fit: cover;
    transition: 0.4s var(--ease2);
    background-color: var(--bg-img);
}

.mobile .btns__productSimple {
    justify-content: center;
    margin-top: 1.5rem;
}

.wrapper.has-bg {
    position: relative;
}


@media (width>=1024px) {
    .wrapper.has-bg {
        padding-bottom: 5rem;
    }

    .banner-product-wrap.has-banner {
        grid-template-columns: 30.6rem minmax(0, 1fr);
    }

    .banner-product__img {
        order: unset;
        /* margin-bottom: 1rem; */
        margin-left: 1rem;
    }

    .section--productSimple .has-bg::after,
    .section--productSimple .has-bg::before {
        content: "";
        position: absolute;
        width: 100%;
        height: calc(50% + -.5rem);
        bottom: 0;
        pointer-events: none;
        z-index: -1;
    }

    .section--productSimple .has-bg::before {
        background-image: var(--sepahkar-decoration-panel, none);
        background-color: var(--c-primary);
        background-position: bottom;
        background-repeat: repeat;
        background-size: auto 30rem;
        background-attachment: fixed;
        z-index: -1;
    }

    .section--productSimple .has-bg::after {
        background: linear-gradient(to top, var(--c-primary), transparent 40%);
    }
}

@media (width<1024px) {
    .has-bg .product-simple-wrap {
        position: relative;
        padding-bottom: 3rem;
        --c: var(--c-primary);
    }

    .has-bg .product-simple-wrap::after,
    .has-bg .product-simple-wrap::before {
        content: "";
        position: absolute;
        width: calc(100% + var(--gutter-x) * 2);
        height: calc(50% + -.5rem);
        bottom: 0;
        pointer-events: none;
        z-index: -1;
        margin-right: calc(var(--gutter-x) * -1);
    }

    .has-bg .product-simple-wrap::before {
        background-image: var(--sepahkar-decoration-panel, none);
        background-color: var(--c-primary);
        background-position: bottom;
        background-repeat: repeat;
        background-size: auto 30rem;
        background-attachment: fixed;
        z-index: -1;
    }

    .has-bg .product-simple-wrap::after {
        background: linear-gradient(to top, var(--c-primary), transparent 40%);
    }
}