.cols-sm-2,
.cols-sm-3,
.cols-md-2,
.cols-md-3,
.cols-md-4,
.cols-lg-2,
.cols-lg-3,
.cols-lg-4
{
	display: grid;
	gap: var(--sp2);
	
}
.cols-sm-2 {
	grid-template-columns: 1fr 1fr;
}
.cols-sm-3 {
	grid-template-columns: 1fr 1fr 1fr;
}
.cols-sm-span-2 {
	grid-column: span 2;
}
.cols-sm-span-3 {
	grid-column: span 3;
	
}
.cols-sm-pos-2 {
	grid-column: 2;
	
}
.cols-sm-pos-3 {
	grid-column: 3;
	
}
.show-md,
.show-lg {
	display: none;
	
}
@media screen and (min-width: 768px){
	.cols-md-span-2 {
		grid-column: span 2;
		
	}
	.cols-md-span-3 {
		grid-column: span 3;
	}
	.cols-md-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.cols-md-2 {
		grid-template-columns: 1fr 1fr;
		
	}
	.cols-md-pos-2 {
		grid-column: 2;
	}
	.cols-md-pos-3 {
		grid-column: 3;
	}
	.cols-md-pos-4 {
		grid-column: 4;
	}
	.show-md {
		display: block;
		
	}
	
}
@media screen and (min-width: 992px){
	.cols-lg-span-2 {
		grid-column: span 2;
	}
	.cols-lg-span-3 {
		grid-column: span 3;
	}
	.cols-lg-span-4 {
		grid-column: span 4;
	}
	.cols-lg-2 {
		grid-template-columns: 1fr 1fr;
	}
	.cols-lg-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.cols-lg-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.cols-lg-pos-2 {
		grid-column: 2;
	}
	.cols-lg-pos-3 {
		grid-column: 3;
	}
	.cols-lg-pos-4 {
		grid-column: 4;
	}	
	.show-lg {
		display: block;
		
	}
	
}