/*--------------------------------------------------------------
	LightGallery (bcbo/gallery)
--------------------------------------------------------------*/
.js-gallery.layout-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

/* Jede Kachel bekommt ein festes Seitenverhältnis, damit Hochformat-
   Bilder die Reihe nicht in die Höhe ziehen */
.js-gallery.layout-tiles .gallery-item {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.js-gallery.layout-tiles .gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*---- damit andere Elemente nicht Höhe bestimmen können */
.js-gallery {
	clear: both;
}


/*------ Abstand danach wenn mehrmals platziert wird ---*/
.js-gallery {
	margin-bottom: 7rem; /* nach Bedarf anpassen */
}

/*---- Logos: Boxhöhe folgt automatisch dem Bildformat, damit kein Leerraum entsteht ----- */
.js-gallery.layout-tiles.image-mode-contain {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.js-gallery.layout-tiles.image-mode-contain .gallery-item {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
	min-width: 0;
	overflow: hidden;
}

.js-gallery.layout-tiles.image-mode-contain .gallery-image {
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}


/*---- Mobil: immer zweispaltig, egal ob Fotos oder Logos ----- */
@media (max-width: 767px) {
	.js-gallery.layout-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*---- Desktop: feste Spaltenanzahl, falls im Backend ausgewählt ----- */
/*     "auto" braucht keine Regel, dann greift weiterhin repeat(auto-fill, minmax(...)) von oben */
@media (min-width: 768px) {
	.js-gallery.layout-tiles.desktop-columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.js-gallery.layout-tiles.desktop-columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.js-gallery.layout-tiles.desktop-columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	.js-gallery.layout-tiles.desktop-columns-5 {
		grid-template-columns: repeat(5, 1fr);
	}
	.js-gallery.layout-tiles.desktop-columns-6 {
		grid-template-columns: repeat(6, 1fr);
	}
	.js-gallery.layout-tiles.desktop-columns-7 {
		grid-template-columns: repeat(7, 1fr);
	}
	.js-gallery.layout-tiles.desktop-columns-8 {
		grid-template-columns: repeat(8, 1fr);
	}
}