@media screen and (max-width: 1600px) {
    .right{
        width: 705px;
        transform: translateX(0px);
    }
    .wrapper{
        margin: 0 20px;
    }
}

@media screen and (max-width: 1024px) {
    .wrapper{
        flex-wrap: wrap;
        max-height: 100%;
        height: 100%;
        justify-content: center;
    }
    html, body{
        width: 100%;
        text-align: center;
    }
    body{
        background-size: 120% 1440px; /* или contain, если нужно */
    }
    .left{
    }
    a{
        position: relative;
        z-index: 10;
    }
    .right{
        transform: translate(0, -100px);
        z-index: 5;
        & img{
            width: 705px;
            height: 797px;
        }
    }
    .pay{
        flex-wrap: wrap;
        bottom: 100px;
        z-index: 1000;
        width: 600px;
    }
    .up__text{
        margin-top: 20px;
        padding-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .pay{
        bottom: 130px;
    }
}

@media screen and (max-width: 425px) {
    .logo{
        width: 92px;
        height: 55px;
    }
    body{
        background: url("image/mob.jpg") no-repeat;
        background-size: 100% 90%;
    }
    .up__text{
        padding-top: 20px;
        margin: 0;
    }
    .down__text{
        padding-top: 15px;
    }
    h1{
        font-size: 40px;
        padding-top: 0;
        margin: 0;
    }
    .banner__subtitle{
        font-size: 18px;
    }
    .down__text{
        font-size: 18px;
    }
    .button{
        font-size: 16px;
    }
    .pay{
        width: 360px;
        bottom: 25px;
        gap: 8px;
        & .pay_item{
            width: 63px;
            height: 31px;
            & img{
                width: 45px;
                height: 24px;
            }
        }
    }
    .button{
        padding: 12px 42px;
    }
    .right{
        & img{
            width: 350px;
            height: 399px;
            transform: translate(0, 100px);
        }
    }
}