@media screen and (min-width: 601px) and (max-width: 1600px){
    .container-cards .box{
        width: 300px !important;
        height: 300px !important;
    }
}

@media screen and (max-width: 600px){
    .container-cards .box-2, .container-cards .box-4{
        margin: 0px !important;
    }
    .container-cards{
        row-gap: 40px;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"box-1"
                            "box-2"
                            "box-3"
                            "box-4"
                            "box-5"
                            "box-6";
        flex-wrap: wrap;
        transform-style: preserve-3d;
        perspective: 500px;
        margin: auto;
        row-gap: 100px;
        /*padding-top: 40px;*/
    }
    .container-cards .box{
        margin-top: 0px !important;
    }
}