main {
	margin: auto;	
	width: 100%;
	max-width: 90rem;
	width: 100%;
	min-width:16rem;	
	display: grid;
	padding: 0.4rem;
	grid-template-columns: repeat(12,1fr);/*80px*/
	grid-gap: 0.5rem;
	grid-auto-flow:dense;
}

.tot { 
	grid-column: span 12;
	/*background: snow;*/
} /*12 UNIDADES*/
	

.bar {	background: snow;;} /*10 UNIDADES*/
.xar {	background: purple;} /*9 UNIDADES*/
/*.art {	background: magenta;} /*8 UNIDADES*/
/*.lct {	background: orange;} /*7 UNIDADES*/
/*.cnt {	background: darkgray;} /*6 UNIDADES*/
/*.sct {	background: gold;} /*5 UNIDADES*/
/*.sdb {	background: green;} /*4 GRIDS*/
.col {	background: red;} /*3 GRIDS*/
.ico {	background: blue;} /*2 GRIDS*/
/*.grd {	background: lightgray;} /*1 GRIDS*/

.material {
	text-align: center;
	display: flex;
   flex-direction: column;
   border-radius: 0.2rem;
   box-shadow: 0.0625rem 0.0625rem 0.5rem #484848;
   padding: 0.5rem;
}

.caja {
	display: flex;
	flex-direction: column;
}

/*PANTALLA XS screen width less than 576px)*/
@media (max-width:575px) {
	/*2 CONTENIDOS*/
	.cnt { grid-column: span 12;}
		
	/*3 BARSIDE*/
	.sdb { grid-column: span 12;}
			
	/*4 COLUMNAS*/
	.col { grid-column: span 12;}
	
	/*6 ICONOS*/
	.ico { grid-column: span 6;}
	
	/*12 GRIDS*/
	.grd { grid-column: span 3;}
	
	/* 1 BARRA Y 1 ICONO*/		
	.bar { grid-column: span 12;}
	.bar + .ico{ grid-column: span 12;}
	
	/*1 X ARTICULO Y 1 COLUMNA*/
	.xar { grid-column: span 12;}
		
	/* 1 ARTICULO Y 1 SIDEBAR*/
	.art { grid-column: span 12;}
		
	/* 1 L CONTENIDO Y S CONTENIDO*/
	.lct { grid-column: span 12;}
	.sct { grid-column: span 12;}
	}
	
/*PANTALLA SM screen width equal to or greater than 576px)*/

@media (min-width:576px) and (max-width:991px){	
	/*2 CONTENIDOS*/
	.cnt { grid-column: span 12;}
	
	/*3 BARSIDE*/
	.sdb { grid-column: span 6;}
	
	.sdb + .sdb + .sdb { grid-column: span 12;}
	
	/*4 COLUMNAS*/
	.col { grid-column: span 6;}
	
	/*6 ICONOS*/
	.ico { grid-column: span 4;}
	
	/*12 GRIDS*/
	.grd { grid-column: span 2;}
	
	/* 1 BARRA Y 1 ICONO*/		
	.bar { grid-column: span 12;}
	.bar + .ico{ grid-column: span 12;}
	
	/*1 X ARTICULO Y 1 COLUMNA*/
	.xar { grid-column: span 12;}
	.xar + .col { grid-column: span 12;}
		
	/* 1 ARTICULO Y 1 SIDEBAR*/
	.art { grid-column: span 12;}
	.art + .sdb { grid-column: span 6;}
		
	/* 1 L CONTENIDO Y S CONTENIDO*/
	.lct { grid-column: span 12;}
	.sct { grid-column: span 12;}
}

/*PANTALLA MD screen width equal to or greater than 768px)*/
@media (min-width:768px) and (max-width:1199px){	
	main {
		grid-gap: 1rem;
	}
	
}

/*LG screen width equal to or greater than 992px)*/
@media (min-width:992px){
	
	main { padding: 0.5rem 1rem 1rem 1rem; }
	
	/*2 CONTENIDOS*/
	.cnt { grid-column: span 6;}
	
	/*3 BARSIDE*/
	.sdb { grid-column: span 4;}
	
	/*4 COLUMNAS*/
	.col { grid-column: span 3;}
	
	/*6 ICONOS*/
	.ico { grid-column: span 2;}
	/*************************/
	
	/*12 GRIDS*/
	.grd { grid-column: span 1;}
	
	/* 1 BARRA Y 1 ICONO*/		
	.bar { grid-column: span 10;}
	
	/*1 X ARTICULO Y 1 COLUMNA*/
	.xar { grid-column: span 9;}
		
	/* 1 ARTICULO Y 1 SIDEBAR*/
	.art { grid-column: span 8;}
		
	/* 1 L CONTENIDO Y S CONTENIDO*/
	.lct { grid-column: span 7;}
	.sct { grid-column: span 5;}
}
		
/* XL screen equal or greater than 1200px)*/
@media (min-width:1200px){

main {grid-gap: 1rem;}

}