@media only screen and (max-width: 1350px) {
    .grid-container-product {
        width: 85%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        margin-bottom: 7%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        grid-template-rows: 300px 300px 300px 300px; 
        gap: 34px 34px;
        grid-template-areas:
            ". . . "
            ". . . "
            ". . . "
            ". . . ";
    }
}



@media only screen and (max-width: 900px) {


    .grid-container-service-headline {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 80%;
        gap: 0px 15px;
        grid-template-areas: "service-leftline service-headline service-blueLine";
    }


    .service-headline {
        justify-self: end;
        font-weight: bold;
        font-size: 50px;
        opacity: 0.2;
    }

    .grid-container-product {
        width: 85%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        margin-bottom: 7%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        grid-template-rows: 230px 230px 230px 230px; 
        gap: 34px 34px;
        grid-template-areas:
            ". . . "
            ". . . "
            ". . . "
            ". . . ";
    }
}


@media only screen and (max-width: 649px) {
    .grid-container-product {
        width: 85%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 7%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        grid-template-rows: 180px 180px 180px 180px; 
        gap: 34px 34px;
        grid-template-areas:
            ". . . "
            ". . . "
            ". . . "
            ". . . ";
    }

    .products-redLine-start {
        background: #A24936;
        opacity: 0.27;
        height: 15px;
        width: 70%;
        border-radius: 0 4px 0 0;
    }
    
    .products-redLine-end {
        background: #A24936;
        opacity: 0.27;
        height: 25px;
        width: 70%;
        margin-bottom: 10px;
        border-radius: 0 0 6px 0;
    }

    .products-redLine-one {
        height: 15px;
        width: 70%;
        background: #A24936;
        opacity: 0.27;
        margin: 0;
        border-radius: 0 4px 0 0;
        margin-top: -0.3vw;
    }
    
    
    .products-redLine-two {
        height: 25px;
        width: 70%;
        background: #A24936;
        opacity: 0.27;
        border-radius: 0 0 4px 0;
        margin-top: 0vw;
    }
    
}

@media only screen and (max-width: 589px) {
    .grid-container-product {
        width: 85%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 7%;
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 180px 180px 180px 180px 180px; 
        gap: 34px 34px;
        grid-template-areas:
            ". ."
            ". ."
            ". ."
            ". ."
            ". .";
    }
}

@media only screen and (max-width: 538px) {

}

@media only screen and (max-width: 476px) {
    .service-headline {
        font-size: 40px;
    }
}

@media only screen and (max-width: 380px) {
    .grid-container-product {
        width: 85%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 7%;
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 160px 160px 160px 160px 160px; 
        gap: 34px 34px;
        grid-template-areas:
            ". ."
            ". ."
            ". ."
            ". ."
            ". .";
    }

}

@media only screen and (max-width: 360px) {

    .service-headline {
        font-size: 40px;
    }

    .grid-container-product {
        width: 85%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 7%;
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 160px 160px 160px 160px 160px; 
        gap: 34px 34px;
        grid-template-areas:
            ". ."
            ". ."
            ". ."
            ". ."
            ". .";
    }

}

@media only screen and (max-width: 320px) {
    .service-headline {
        font-size: 40px;
    }
}