
/*--------- СТИЛИ БЛОКОВ СЕТКИ НАЧАЛО ---------*/

.grid-block {
    display: grid;
}

.grid-block__2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-block__3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-block__2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-block__3-2-1 {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.grid-block__4-3-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-block__4-3-2-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-block__5-4-3-2-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid-block__5-4-3-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}


.gg10 {
    grid-gap: 10px;
}

.gg15 {
    grid-gap: 15px;
}

.gg20 {
    grid-gap: 20px;
}

.gg30 {
    grid-gap: 30px;
}


/*--------- СТИЛИ БЛОКОВ СЕТКИ КОНЕЦ ---------*/





@media only screen and (max-width: 2560px) {

}

@media only screen and (max-width: 1920px) {

}

@media only screen and (max-width: 1600px) {
  
}


@media only screen and (max-width: 1366px) {

}


@media only screen and (max-width: 1280px) {
    
}


@media only screen and (max-width: 992px) {
    
    .grid-block__2-1 {
        grid-template-columns: 1fr;
    }

    .grid-block__3-2-1 {
        grid-template-columns: 1fr 1fr;
    }  

}


@media only screen and (max-width: 768px) {

    .grid-block__4-3-2 {        
        grid-template-columns: 1fr 1fr;
    }
    
    .grid-block__2-1 {
        grid-template-columns: 1fr;
    }
    
}


@media only screen and (max-width: 640px) {

    .grid-block__3-2-1 {
        grid-template-columns: 1fr;
    }

    .grid-block__5-4-3-2 {
        grid-template-columns: 1fr 1fr;
    }
} 


@media only screen and (max-width: 480px) {
    
} 


@media only screen and (max-width: 320px) {

} 