.grid {
	display:grid;	
	grid-template-columns: repeat(12, 1fr);
}
.grid > div,.grid > .col-12, .grid > .col {grid-column: span 12;}
.grid > .col-11 {grid-column: span 11;}
.grid > .col-10 {grid-column: span 10;}
.grid > .col-9 {grid-column: span 9;}
.grid > .col-8 {grid-column: span 8;}
.grid > .col-7 {grid-column: span 7;}
.grid > .col-6 {grid-column: span 6;}
.grid > .col-5 {grid-column: span 5;}
.grid > .col-4 {grid-column: span 4;}
.grid > .col-3 {grid-column: span 3;}
.grid > .col-2 {grid-column: span 2;}
.grid > .col-1 {grid-column: span 1;}




@media only screen and (min-width: 1024px) {
	.grid > .col-m-11 {grid-column: span 11;}
	.grid > .col-m-10 {grid-column: span 10;}
	.grid > .col-m-9 {grid-column: span 9;}
	.grid > .col-m-6 {grid-column: span 6;}
	.grid > .col-m-5 {grid-column: span 5;}
	.grid > .col-m-4 {grid-column: span 4;}
	.grid > .col-m-3 {grid-column: span 3;}
	.grid > .col-m-2 {grid-column: span 2;}
	.grid > .col-m-1 {grid-column: span 1;}
}
@media only screen and (min-width: 1280px){
	.grid > .col-l-11 {grid-column: span 11;}
	.grid > .col-l-10 {grid-column: span 10;}
	.grid > .col-l-9 {grid-column: span 9;}
	.grid > .col-l-6 {grid-column: span 6;}
	.grid > .col-l-5 {grid-column: span 5;}
	.grid > .col-l-4 {grid-column: span 4;}
	.grid > .col-l-3 {grid-column: span 3;}
	.grid > .col-l-2 {grid-column: span 2;}
	.grid > .col-l-1 {grid-column: span 1;}
}
@media only screen and (min-width: 1920px){
	.grid > .col-xl-11 {grid-column: span 11;}
	.grid > .col-xl-10 {grid-column: span 10;}
	.grid > .col-xl-9 {grid-column: span 9;}
	.grid > .col-xl-6 {grid-column: span 6;}
	.grid > .col-xl-5 {grid-column: span 5;}
	.grid > .col-xl-4 {grid-column: span 4;}
	.grid > .col-xl-3 {grid-column: span 3;}
	.grid > .col-xl-2 {grid-column: span 2;}
	.grid > .col-xl-1 {grid-column: span 1;}
}