/* Bildergalerie — zwei Darstellungen aus derselben Auszeichnung.

   „natural" lässt jedes Bild in seinen eigenen Proportionen und verteilt die
   Kacheln über CSS-Spalten (hoch und quer gemischt). Jedes andere Format
   schneidet über aspect-ratio und object-fit zu; die Bilddateien selbst
   bleiben unangetastet. Ein weiteres Format ist deshalb genau eine Zeile
   weiter unten. */

.pe-gallery__grid {
	--pe-gallery-columns: 3;
	--pe-gallery-gap: var(--space-md);

	list-style: none;
	margin: 0;
	padding: 0;
}

.pe-gallery__link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-ink-soft);
	box-shadow: var(--shadow-soft);
}

.pe-gallery__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--panel-inset);
	pointer-events: none;
}

.pe-gallery__img {
	display: block;
	width: 100%;
	transition: transform var(--transition-normal);
}

.pe-gallery__link:hover .pe-gallery__img,
.pe-gallery__link:focus-visible .pe-gallery__img { transform: scale(1.04); }

/* ── Natürliche Proportionen ─────────────────────────────────── */
.pe-gallery--natural .pe-gallery__grid {
	columns: var(--pe-gallery-columns);
	column-gap: var(--pe-gallery-gap);
}

.pe-gallery--natural .pe-gallery__item {
	margin-block-end: var(--pe-gallery-gap);
	break-inside: avoid;
}

/* ── Einheitlicher Zuschnitt ─────────────────────────────────── */
.pe-gallery--4-3  { --pe-gallery-ratio: 4 / 3; }
.pe-gallery--1-1  { --pe-gallery-ratio: 1 / 1; }
.pe-gallery--2-3  { --pe-gallery-ratio: 2 / 3; }
.pe-gallery--9-16 { --pe-gallery-ratio: 9 / 16; }
.pe-gallery--16-9 { --pe-gallery-ratio: 16 / 9; }

.pe-gallery:not(.pe-gallery--natural) .pe-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--pe-gallery-columns), 1fr);
	gap: var(--pe-gallery-gap);
}

.pe-gallery:not(.pe-gallery--natural) .pe-gallery__link {
	aspect-ratio: var(--pe-gallery-ratio);
}

.pe-gallery:not(.pe-gallery--natural) .pe-gallery__img {
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.pe-gallery__grid { --pe-gallery-columns: 2; }
}

@media (max-width: 560px) {
	.pe-gallery__grid {
		--pe-gallery-columns: 1;
		--pe-gallery-gap: var(--space-sm);
	}
}