/*--------- СТИЛИ БЛОКОВ СЕТКИ НАЧАЛО ---------*/

.grid-block {
    display: grid;
}

.grid-block__2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-block__3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-block__3-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-block__2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-block__3-2-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-block__3-2-3 {
    display: grid;
    grid-template-areas: "one one two two three three"
        "four four four five five five"
        "six six seven seven eight eight";
}

.grid-block__4-3-2 {
    display: grid!important;
    grid-template-columns: repeat(4, 1fr);
}

.grid-block__4-3-2-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid-block__5-4-3-2-1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.grid-block__5-4-3-2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.grid-block__3-7__1-1 {
    display: grid;
    grid-template-columns: 3fr 7fr;
}

.rg30 {
    grid-row-gap: 30px;
}

.cg15 {
    grid-column-gap: 15px;
}

.gg4 {
    grid-gap: 4px;
}

.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) {
    .grid-block__3-7__1-1 {
        grid-template-columns: 1fr 1fr;
    }
}


@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;
    }
	
	.grid-block__4-3-2 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-block__4-3-2-1 {
		grid-template-columns: repeat(3, 1fr);	
	}

		
 
}


@media only screen and (max-width: 768px) {
   
    .grid-block__4-3-2 {        
        grid-template-columns: 1fr 1fr;
    }
    
    .grid-block__3-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    .grid-block__2-1 {
        grid-template-columns: 1fr;
    }

    .grid-block__3-2-3 {
        display: grid;
        grid-template-areas: "one two"
            "three four"
            "five six"
            "seven eight"
        ;
    }

    .grid-block__3-7__1-1 {
        grid-template-columns: 1fr;
    }
	
	.grid-block__4-3-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-block__4-3-2-1 {
		grid-template-columns: repeat(2, 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;
    }
	
	.grid-block__4-3-2-1 {
		grid-template-columns: 1fr;	
	}
    
} 


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


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

}