@media (max-width: 1200px){
    .container {
        max-width: 100%;
    }
    
    .modules-container {
        max-width: 100%;
    }

    .home-content {
        padding: 30px;
        /* text-align: center; */
    }
}


@media (max-width: 1198px){
    .portfolio-card {
        grid-template-columns: repeat(3, 277px);
        grid-template-rows: repeat(6, 220px);
        grid-template-areas:
        "card-1 card-1 product-1"
        "card-1 card-1 product-1"
        "product-2 card-2 card-3"
        "product-2 card-2 card-3"
        "product-3 product-3 card-4"
        "product-3 product-3 card-4";
    }

    .price-card {
        grid-template-columns: repeat(2, 370px);
        grid-template-rows: repeat(3, 300px);
        grid-auto-rows: 380px;
        grid-template-areas: 
        "price-1 price-1"
        "price-2 price-3"
        "price-4 price-4";
    }
}


@media (max-width: 1180px){
    .home-content {
        margin-top: 80px;
    }
}


@media (max-width: 1120px){
    .home-content {
        margin-top: 50px;
    }
}


@media (max-width: 1030px){
    .home-content {
        margin-top: 20px;
    }
}


@media (max-width: 992px) {
    .header-nav, .header-login {
        display: none;
    }
    .mobile-nav-button {
        display: flex;
    }
    .home {
        padding: 50px 0;
    }
    .home-row {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .home-content {
        margin-top: 0px;
        text-align: center;
        padding-bottom: 50px;
    }

    .home-btn {
        width: 200px;   
        height: 65px;
        padding: 0 30px;
        line-height: 65px;
    }

    .home-img {
        display: none;
    }
}


@media (max-width: 902px){
    .portfolio-card {
        grid-template-columns: repeat(2, 277px);
        grid-template-rows: repeat(8, 220px);
        grid-template-areas:
        "card-1 card-1"
        "card-1 card-1"
        "product-1 product-2"
        "product-1 product-2"
        "card-2 card-3"
        "card-2 card-3"
        "product-3 product-3"
        "product-3 product-3";
    }
}


@media (max-width: 799px){
    .price-card {
        grid-template-columns: repeat(1, 370px);
        grid-template-rows: repeat(4, 300px);
        grid-auto-rows: 380px;
        grid-template-areas: 
        "price-1"
        "price-2"
        "price-3"
        "price-4";
    }

    .price-card-content {
        text-align: center;
        margin: 20px 0px 0px 0px;
    }

    .price-card-content p {
        display: none;
    }

    .card-price-row {
        flex-direction: column;
        text-align: center;
        column-gap: 30px;
    }

    .price-btn {
        display: none;
    }

    .price-card-img-4 {
        text-align: center;
    }

    .price-card-img-4 img {
        margin: 0;
        height: 0;
        width: 180px;
        height: auto;
    }

    .price-card-heading {
        display: none;
    }

    .price-card-heading-2 {
        margin: 0;
        display: block;
    }
    
    .price-card-pay-4 {
        display: block;
    }
}


@media (max-width: 768px) {
    .home {
        padding-top: 20px;
    }
    .home-content {
        padding-bottom: 20px;
    }
    .home-content p {
        font-size: 22px;
        }
        .home-heading {
            font-size: 42px;
        }

}


@media (max-width: 604px){
    .portfolio-card {
        /* Сделать слайдер */
        grid-template-columns: repeat(1, 277px);
        grid-template-rows: repeat(12, 220px);
        grid-template-areas:
        "card-1"
        "card-1"
        "product-1"
        "product-1"
        "product-2"
        "product-2"
        "card-2"
        "card-2"
        "card-3"
        "card-3"
        "product-3"
        "product-3";
    }  
}


@media (max-width: 576px) {
    .home-img {
        display: none;
    }


}