/* FLOWIM - grille */

.flowim-grid {
	display: grid;
	grid-template-columns: repeat(var(--flowim-cols, 3), minmax(0, 1fr));
	gap: var(--flowim-gap);
}

.flowim-grid-item {
	min-width: 0;
}

/* Mixte : chaque vignette garde son ratio d'origine, les hauteurs de rangée
   s'alignent sur le contenu. */
.flowim-grid--auto {
	align-items: start;
}

/* Ratios imposés */

.flowim-grid--square .flowim-grid-item .flowim-img,
.flowim-grid--portrait .flowim-grid-item .flowim-img,
.flowim-grid--land .flowim-grid-item .flowim-img {
	width: 100%;
	object-fit: cover;
}

.flowim-grid--square .flowim-grid-item .flowim-img { aspect-ratio: 1 / 1; }
.flowim-grid--portrait .flowim-grid-item .flowim-img { aspect-ratio: 4 / 5; }
.flowim-grid--land .flowim-grid-item .flowim-img { aspect-ratio: 3 / 2; }

/* Masonry : colonnes CSS, pas de JS. */

.flowim-grid--masonry {
	display: block;
	column-count: var(--flowim-cols, 3);
	column-gap: var(--flowim-gap);
}

.flowim-grid--masonry .flowim-grid-item {
	break-inside: avoid;
	margin-bottom: var(--flowim-gap);
	display: inline-block;
	width: 100%;
}

@media (max-width: 1024px) {
	.flowim-grid {
		grid-template-columns: repeat(min(var(--flowim-cols, 3), 3), minmax(0, 1fr));
	}
	.flowim-grid--masonry {
		column-count: min(var(--flowim-cols, 3), 3);
	}
}

@media (max-width: 640px) {
	.flowim-grid {
		grid-template-columns: repeat(min(var(--flowim-cols, 3), 2), minmax(0, 1fr));
	}
	.flowim-grid--masonry {
		column-count: min(var(--flowim-cols, 3), 2);
	}
}