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

.tot {	background: black;
			color: whitesmoke;
			grid-column: span 12;} /*12 UNIDADES*/
	

.bar {	background: brown;} /*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*/

.caja {
	/*padding: 20px;*/
	text-align: center;
	display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        border-radius: 0.2rem;
        min-height: 4rem;
        box-shadow: 0 0.0625rem 0.0625rem #484848;
        padding:0.5rem;
}

/*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;}
	/*************************/	
		
	/* 1 CONTENIDO Y 2 COLUMNAS*/	
	/*YA DEFINIDO PREVIAMENTE*/
	/*************************/
	
	}
	
/*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 12;}
	/*************************/
		
	/* 1 L CONTENIDO Y S CONTENIDO*/
	.lct { grid-column: span 12;}
	.sct { grid-column: span 12;}
	/*************************/	
		
	/* 1 CONTENIDO Y 2 COLUMNAS*/	
	/*YA DEFINIDO PREVIAMENTE*/
	/*************************/
}

/*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: 1rem 2rem;
	}
				/*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;}
	/*************************/	
		
	/* 1 CONTENIDO Y 2 COLUMNAS*/	
	/*YA DEFINIDO PREVIAMENTE*/
	/*************************/
}
		
/* XL screen equal or greater than 1200px)*/
@media (min-width:1200px){

main {grid-gap: 1.5rem;}

}