.gr8 {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 20px;
	padding: 0px;
}

.gr3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 0px;
}

.gr6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	padding: 0px;
}

.gr5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	padding: 0px;
}

.gr2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 0px;
}

.cl1  { grid-column: span 1; }
.cl2  { grid-column: span 2; }
.cl3  { grid-column: span 3; }
.cl4  { grid-column: span 4; }
.cl5  { grid-column: span 5; }
.cl6  { grid-column: span 6; }
.cl7  { grid-column: span 7; }
.cl8  { grid-column: span 8; }



@media (max-width: 900px) {
	.gr2 > .cl1, .gr2 > .cl2 { grid-column: span 2; }
	.gr3 > .cl1, .gr3 > .cl2, .gr3 > .cl3 { grid-column: span 3; }
	.gr5 > .cl1, .gr5 > .cl2, .gr5 > .cl3, .gr5 > .cl4, .gr5 > .cl5 { grid-column: span 5; }
	.gr6 > .cl1, .gr6 > .cl2, .gr6 > .cl3, .gr6 > .cl4, .gr6 > .cl5, .gr6 > .cl6 { grid-column: span 6; }
	.gr8 > .cl1, .gr8 > .cl2, .gr8 > .cl3, .gr8 > .cl4, .gr8 > .cl5, .gr8 > .cl6, .gr8 > .cl7, .gr8 > .cl8  { grid-column: span 8; }
}