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

@media only screen and (min-width: 1500px) {
	.xl1 {
		grid-column: span 1;
	}

	.xl2 {
		grid-column: span 2;
	}

	.xl3 {
		grid-column: span 3;
	}

	.xl6 {
		grid-column: span 6;
	}

	.xl9 {
		grid-column: span 9;
	}

	.xl12 {
		grid-column: span 12;
	}
}

@media only screen and (max-width: 1500px) {
	.l1 {
		grid-column: span 1;
	}

	.l2 {
		grid-column: span 2;
	}

	.l3 {
		grid-column: span 3;
	}

	.l6 {
		grid-column: span 6;
	}

	.l9 {
		grid-column: span 9;
	}

	.l12 {
		grid-column: span 12;
	}
}

@media only screen and (max-width: 1200px) {
	.m3 {
		grid-column: span 3;
	}

	.m6 {
		grid-column: span 6;
	}

	.m9 {
		grid-column: span 9;
	}

	.m12 {
		grid-column: span 12;
	}
}

@media only screen and (max-width: 800px) {
	.s3 {
		grid-column: span 3;
	}

	.s6 {
		grid-column: span 6;
	}

	.s9 {
		grid-column: span 9;
	}

	.s12 {
		grid-column: span 12;
	}
}