/* Modul: Galerie */

.cype-gallery {
	--cype-gallery-gap: 16px;
}

.cype-gallery--gap-s {
	--cype-gallery-gap: 8px;
}

.cype-gallery--gap-l {
	--cype-gallery-gap: 28px;
}

/* Grid nutzt das responsive Spaltenraster (.cype-cols aus base.css). */
.cype-gallery--grid {
	gap: var(--cype-gallery-gap);
}

.cype-gallery--crop .cype-gallery__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* Masonry über CSS-Columns, Spaltenzahl aus denselben Variablen. */
.cype-gallery--masonry {
	column-count: var(--cype-cols-d, 3);
	column-gap: var(--cype-gallery-gap);
}

.cype-gallery--masonry .cype-gallery__item {
	break-inside: avoid;
	margin-bottom: var(--cype-gallery-gap);
}

.cype-gallery__item {
	margin: 0;
	position: relative;
}

.cype-gallery__item figcaption {
	margin-top: 0.4em;
}

@media (max-width: 1023px) {
	.cype-gallery--masonry {
		column-count: var(--cype-cols-t, 2);
	}
}

@media (max-width: 781px) {
	.cype-gallery--masonry {
		column-count: var(--cype-cols-m, 1);
	}
}