Как сделать адаптивность сайта?

/*BLOCK_3*/ 
.row-block_3 { 
    justify-content: space-around; 
    text-align: -webkit-center; 
     margin: 0; 
} 
.row2-block_3{ 
    justify-content: space-around; 
    text-align: -webkit-center; 
    padding-bottom: 100px; 
    margin: 30px 0; 
} 
.ZAGOLOVOK_WHITE { 
    font-family: 'Bebas Neue'; 
    font-weight: bold; 
    font-size: 42px; 
    color: white; 
    margin: 80px 0 60px 0;} 
.card-logo{ 
    text-align: -webkit-center; 
    width: 200px; 
    height: 150px; 
    display: flex; 
    justify-content: center; 
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.44); 
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.44); 
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.44);} 
.card-img-top{ 
    width: 60% !important;} 
.grid-container { 
    display: grid; 
    grid-template-columns: auto auto auto auto auto; 
    grid-gap: 10px; 
    padding: 20px; 
    justify-items: end; 
    grid-auto-rows: 200px;} 
.grid-container > div { 
    padding: 20px 0; 
    font-size: 30px;} 
@media (max-width: 1280px){ 
    .block_5_text{ 
        font-size: 22px; 
    } 
    .icon-block_5 { 
        width: 20px; 
    } 
} 
 
@media (max-width: 1100px){ 
    .block_5_text{ 
        font-size: 20px; 
    } 
    .icon-block_5 { 
        width: 20px; 
    } 
} 
 
@media (max-width: 1024px){ 
    .card-product-img{ 
        width: 60%; 
    } 
    .card-product-img-bitcoin{ 
        width: 80px; 
    } 
    .card-logo-prod { 
        width: 160px; 
        height: 120px; 
    } 
    .container-nav { 
        margin-right: 0; 
    } 
    .card-product { 
        margin-bottom: 50px; 
    } 
    .ZAGOLOVOK_1_1 { 
        font-size: 30px; 
    } 
    .ZAGOLOVOK_1_2 { 
        font-size: 40px; 
    } 
    .ZAGOLOVOK_2_1 { 
        font-size: 30px; 
    } 
    .ZAGOLOVOK_2_2 { 
        font-size: 40px; 
    } 
    .ZAGOLOVOK_WHITE { 
        margin: 60px 0 40px 0; 
    } 
} 
 
@media (max-width: 992px){ 
    .navbar_img_logo { 
        margin-right: 0; 
    } 
    .container-nav { 
        max-width: 1000px !important; 
    } 
    .container-nav { 
        max-width: 1000px; 
    } 
    .icon-block_5 { 
        display: contents; 
        margin-left: -10px; 
        width: 15px; 
        margin-top: 5px; 
    } 
    .text-center-my{ 
        text-align: -webkit-center; 
    } 
    .list-unstyled{ 
        font-size: 14px; 
    } 
    #footer h5{ 
        font-size: 25px; 
    } 
    .BLOCK_1_CONTENT { 
        width: 100%;} 
    .ZAGOLOVOK_1_2 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 40px; 
        font-weight: bold; 
        color: white;} 
    .ZAGOLOVOK_1_1 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 30px; 
        font-weight: lighter; 
        color: white;} 
    .ZAGOLOVOK_2_1 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 30px; 
        font-weight: lighter; 
        color: white;} 
    .ZAGOLOVOK_2_2 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 40px; 
        font-weight: bold; 
        color: white;} 
} 
 
@media (max-width: 768px){ 
    .bazis-margin-768px 
    .marginleft-768px { 
        margin-left: 256px; 
    } 
    .block-6-margintop{ 
        margin-top: 30px; 
    } 
    .margintop-768px{ 
        margin-top: -120px !important; 
    } 
    .row-block_3 { 
        justify-content: end; 
        text-align: -webkit-center; 
        margin: 0; 
    } 
    .row2-block_3{ 
        justify-content: end; 
        text-align: -webkit-center; 
        padding-bottom: 100px; 
        margin: 30px 0; 
    } 
    .cashterminal-margin-768px{ 
        margin-top: -120px; 
    } 
    .walletone-margin-768px{ 
        margin-left: 256px; 
        margin-top: 30px;  
    } 
    .bitcoin-margin-768px{ 
        margin-top: -150px; 
         
    } 
    .card-prod-margin-top { 
        margin-top: 30px;  
    } 
    .card-title{ 
        font-size: 50px; 
    } 
    .card-subtitle_1{ 
        font-size: 35px; 
    } 
    .card-title-text_1{ 
        font-size: 30px; 
    } 
    .card-text_1{ 
        font-size: 20px; 
    } 
    .card-logo{width: 200px;} 
    .ZAGOLOVOK_WHITE { 
        margin: 40px 0 40px 0; 
    } 
    .bottom_text { 
        font-size: 23px; 
        font-family: 'Calibri'; 
        font-weight: lighter; 
    } 
    .list-unstyled{ 
        font-size: 12px 
    } 
    #footer h5 { 
        font-size: 22px; 
        padding-left: 0; 
        border-left: transparent; 
        padding-bottom: 0px; 
        margin-bottom: 10px;} 
    .BLOCK_1_CONTENT { 
        width: 90%;} 
    h1{ 
        line-height: 0.9 !important;} 
    .glav-img{ 
        width: 80%} 
    .ZAGOLOVOK_1_2 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 40px; 
        font-weight: bold; 
        color: white;} 
    .ZAGOLOVOK_1_1 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 30px; 
        font-weight: lighter; 
        color: white;} 
    .ZAGOLOVOK_2_1 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 30px; 
        font-weight: lighter; 
        color: white;} 
    .ZAGOLOVOK_2_2 { 
        font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
        font-size: 40px; 
        font-weight: bold; 
        color: white;} 
         
    /*BLOCK_6*/ 
    .card-logo-customers { 
        width: 200px;} 
    .img-customers{width: 90%} 
    .block_6_text{ 
        font-size: 30px; 
        font-family: 'Calibri'; 
        font-weight: lighter;} 
    .card-768px{ 
        display: grid; 
        justify-content: center; 
    } 
} 
 
@media (min-width: 576px){ 
    .container { 
        max-width: 600px; 
    } 
} 
@media (max-width: 550px){ 
    .ZAGOLOVOK_WHITE{font-size: 30px} 
} 
@media (max-width: 425px){ 
    .bazis-margin-425px {margin-top: -200px !important;} 
    .kaztranscom-margintop-425px{ 
        margin-left: 213px; 
        margin-top: -200px !important; 
    } 
    .nomad-margintop-425px { 
        margin-top: -200px; 
    } 
    .marginleft-768px { 
        margin-left: 0 !important; 
    } 
    .margintop-768px { 
        margin-top: 30px !important; 
    } 
    .row { 
        margin-top: 0 !important; 
    } 
    .row-block_3 { 
        justify-content: end; 
        text-align: -webkit-center; 
        margin: 0; 
    } 
    .row2-block_3{ 
        justify-content: end; 
        text-align: -webkit-center; 
        padding-bottom: 100px; 
        margin: 30px 0; 
    } 
    .cashterminal-walle-425px { 
        margin-top: -150px !important; 
        margin-left: 202px; 
    } 
    .margin-walle-425px { 
        margin-top: -150px !important; 
    } 
    .margin-yandex-425px{ 
        margin-top: -150px !important; 
    } 
    .cashterminal-margin-768px{ 
        margin-top: 0; 
    } 
    .walletone-margin-768px{ 
        margin-left: 0; 
        margin-top:0;  
    } 
    .margin-425px{ 
        margin-top: 30px;   
    } 
    .block_5_text{ 
        margin-left: 5px; 
        margin-top: 5px; 
        font-size: 18px; 
    } 
    .card-logo { 
        width: 150px; 
        height: 150px; 
    } 
    .card_priemushestva{ 
        height: 200px; 
        width: 160px; 
    } 
    .card-product-img{ 
        width: 50%; 
    } 
    .card-product-img-bitcoin{ 
        width: 60px 
    } 
    h1 {line-height: 0.7 !important;} 
    h2 {line-height: 0.8 !important;} 
    .ZAGOLOVOK_1_1 { 
        font-size: 20px; 
    } 
    .ZAGOLOVOK_1_2 { 
        font-size: 30px; 
    } 
    .ZAGOLOVOK_2_1 { 
        font-size: 20px; 
    } 
    .ZAGOLOVOK_2_2 { 
        font-size: 30px; 
    } 
    .block-center { 
        display: grid; 
        justify-content: center 
    } 
} 
 
@media (max-width: 375px) { 
    .ZAGOLOVOK_BLUE{ 
        font-size: 38px; 
    } 
    .cashterminal-walle-425px { 
        margin-top: -150px !important; 
        margin-left: 187px; 
    } 
    .kaztranscom-margintop-425px{ 
        margin-left: 187px; 
        margin-top: -200px !important; 
    } 
} 
@media (max-width: 320px) { 
    .cashterminal-walle-425px { 
        margin-left: 160px; 
    } 
}

<!--BLOCK_3--> 
    <div class="BLOCK_1_BG_IMG"> 
        <div class="container" style="max-width: 1366px;"> 
            <div class="row" style="display: grid; justify-content: center;"> 
                <div class="col-xl-12" id="sposoby-oplaty"> 
                    <h2 class="ZAGOLOVOK_WHITE">Один продукт - 10 способов оплаты</h2> 
                </div>     
            </div> 
            <div class="row row-block_3"> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/visa.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/mastercard.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center margin-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/beeline.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center card-prod-margin-top margin-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/onay.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center card-prod-margin-top margin-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/qiwi.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
            </div> 
            <div class="row row2-block_3"> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center margin-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/WebMoney.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center margin-425px margin-yandex-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/Yandex.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center bitcoin-margin-768px margin-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/bitcoin.png" class="card-product-img-bitcoin card-img-top" style="width: 40% !important"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center walletone-margin-768px margin-425px margin-walle-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/wallet one.png" class="card-product-img card-img-top"> 
                    </div> 
                </div> 
                <div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6 block-center cashterminal-margin-768px margin-425px cashterminal-walle-425px"> 
                    <div class="card card-logo card-logo-prod"> 
                        <img src="images/CASH TERMINAL.png" class="card-product-img"> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div>