/*
 * Layout minimo del bloque "Tiled Gallery" de Jetpack.
 *
 * La exportacion estatica perdio la hoja de estilos del plugin, por lo que las
 * imagenes de las galerias se mostraban a su tamano real (hasta 1872 px) y
 * desbordaban la pagina horizontalmente en cualquier pantalla mas estrecha.
 *
 * Estas reglas reproducen solo el armazon de maquetacion que aportaba Jetpack:
 * las filas son flex, las columnas respetan el flex-basis en linea que ya trae
 * el HTML y las imagenes se ajustan al ancho de su columna conservando su
 * proporcion. El selector esta limitado a las clases .tiled-gallery__* para no
 * afectar a ningun otro elemento de la pagina.
 */

.tiled-gallery__gallery {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.tiled-gallery__row {
	display: flex;
	flex-direction: row;
	gap: 4px;
	width: 100%;
}

/* min-width:0 permite que las columnas se encojan por debajo del ancho
   intrinseco de la imagen; sin el, el flexbox no reduce y persiste el
   desbordamiento. El flex-basis viene en el atributo style del HTML. */
.tiled-gallery__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tiled-gallery__item {
	margin: 0;
	min-width: 0;
}

.tiled-gallery__item > img {
	display: block;
	width: 100%;
	height: auto;
}