/* solo ejecuta para desktop y no mobile*/
@media screen and (min-width: 720px) {

	/* GRID 2 by 4 */
	.grid2by4 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	.grid2by4 > div.block25.producto {
		float: none;
		flex: 0 0 auto;
        width: 24%;
	}
	.grid2by4 div.producto.bigsquare{
		margin-left:1px;
		margin-right:1px;
	}
	.grid2by4 > div.block25.producto:nth-child(6n + 2)::after {
		content: "";
		flex-basis: 100%;
	}
	.grid2by4 > div.block25.producto:nth-child(6n + 6)::after {
		content: "";
		flex-basis: 100%;
	}
	.grid2by4 > div.block25.producto:nth-child(6n + 1),
	.grid2by4 > div.block25.producto:nth-child(6n + 2) {
		width: 38.2%;
	}
	



	/* GRID MIX (banner + 4 / 4 / banner + 4 / 4 ...) */
	.gridMix {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		grid-auto-flow: dense;
	}
	/* bloque 1 (arriba izquierda) */
	.gridMix > div.producto:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}
	/* bloque 2 (medio derecha) */
	.gridMix > div.producto:nth-child(10) {
		grid-column: 3 / span 2;
		grid-row: span 2;
	}
	/* bloque 3 (abajo izquierda) */
	.gridMix > div.producto:nth-child(19) {
		grid-column: span 2;
		grid-row: span 2;
	}
	/* todos los items base */
	.gridMix > div.producto {
		width: 100%;
	}
	.gridMix .banner picture, .banner img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
	
	
	
	
	
/* Nuevo layout alternado (fijo para 3 bloques grandes) */
.gridMix.gridBaciver > div.producto {
	/* Reseteamos los estilos fijos del gridMix original */
	grid-column: auto;
	grid-row: auto;
}

/* 1° Bloque Grande: Izquierda (Elemento 1) */
.gridMix.gridBaciver > div.producto:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

/* 2° Bloque Grande: Derecha (Elemento 6) */
.gridMix.gridBaciver > div.producto:nth-child(6) {
	grid-column: 3 / span 2;
	grid-row: span 2;
}

/* 3° Bloque Grande: Izquierda (Elemento 11) */
.gridMix.gridBaciver > div.producto:nth-child(11) {
	grid-column: span 2;
	grid-row: span 2;
}



}



/* solo ejecuta para mobile y no desktop*/
@media screen and (max-width: 720px) {
	
	/*  ESTANDAR */
	.grid4,
	.gridMix {
		display: grid;
		grid-template-columns: repeat(2, 2fr); 
		gap: 10px; 
	}
	.gridMix .banner {
		grid-column: span 2;
	}
	
	
	
	
	.grid2by4 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.grid2by4 > div.block25.producto {
		width: 100%;
	}

	/* los 2 primeros → full width */
	.grid2by4 > div.block25.producto:nth-child(6n + 1),
	.grid2by4 > div.block25.producto:nth-child(6n + 2) {
		grid-column: span 2;
	}
}