/* Rows without JS: each item grows and starts at a width proportional to its
   aspect ratio (--w / --h), so all items of a row end up the same height.
   The ::after filler keeps the last row from stretching. */
.c-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 5px);
}

.c-gallery::after {
	content: '';
	flex-grow: 1000000;
}

.c-gallery__item {
	display: block;
	aspect-ratio: var(--w) / var(--h);
	flex-grow: calc(var(--w) / var(--h) * 100);
	flex-basis: calc(var(--row-height, 200px) * var(--w) / var(--h));
}

.c-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-gallery__item--disabled {
	pointer-events: none;
}