.fotos-wrap div, .folders-wrap div {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 150px;
}


/*
 * Vorschaubilder werden mit doppelter Kantenlaenge erzeugt (FOTOS_THUMB_SIZE),
 * damit sie auf HiDPI-Displays scharf sind. Angezeigt werden sie weiterhin
 * 150 px gross. Ohne diese Regel wuerden die width/height-Attribute, die
 * fotos_gallery() aus getimagesize() uebernimmt, neue Galerien doppelt so
 * gross darstellen. Aeltere Galerien mit 150-px-Dateien bleiben unveraendert.
 */
.fotos-wrap a img {
    width: 150px;
    height: 150px;
}

/*
 * Mosaik-Kacheln der Galerieuebersicht
 *
 * Greift nur, wenn fotos_gallery() die Klasse folders-wrap--mosaik setzt,
 * also bei ?stil=mosaik. Die bisherige Darstellung bleibt unberuehrt.
 *
 * Absichtlich ohne eigene Schrift- und Farbvorgaben: Titel und Textfarbe
 * kommen aus dem Theme, damit sich die Kacheln in die Seite einfuegen.
 */
.folders-wrap--mosaik {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 26px 22px;
    margin-bottom: 32px;
}
.folders-wrap--mosaik .fotos-kachel {
    display: block;
    text-decoration: none;
    color: inherit;
}
.fotos-kachel__huelle {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f0ecea;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.07);
    transition: transform .2s ease, box-shadow .2s ease;
}
.fotos-kachel:hover .fotos-kachel__huelle,
.fotos-kachel:focus-visible .fotos-kachel__huelle {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(0,0,0,.09), 0 12px 28px rgba(0,0,0,.14);
}
.fotos-kachel:focus-visible .fotos-kachel__huelle {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.fotos-kachel__mosaik {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
}
.fotos-kachel__mosaik img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Weniger als vier Bilder fuellen die Kachel trotzdem vollstaendig aus. */
.fotos-kachel__mosaik[data-anzahl="1"] img { grid-column: span 2; grid-row: span 2; }
.fotos-kachel__mosaik[data-anzahl="2"] img { grid-row: span 2; }
.fotos-kachel__mosaik[data-anzahl="3"] img:first-child { grid-row: span 2; }

.fotos-kachel__symbol {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.fotos-kachel__symbol img { width: 55%; height: auto; }

.fotos-kachel__titel {
    display: block;
    margin-top: 10px;
    line-height: 1.35;
    text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
    .fotos-kachel__huelle { transition: none; }
    .fotos-kachel:hover .fotos-kachel__huelle { transform: none; }
}

/*
 * Das Theme angela2018 setzt fuer Inhaltsbilder max-width: 97.5%. In den
 * Mosaik-Kacheln kappt das jedes Bild um 2,5 Prozent seiner Rasterspalte,
 * wodurch die senkrechten Fugen breiter wirken als die waagerechten. Der
 * laengere Selektor gewinnt gegen die Theme-Regel, unabhaengig davon, in
 * welcher Reihenfolge die Stylesheets geladen werden.
 */
.folders-wrap--mosaik .fotos-kachel__mosaik img,
.folders-wrap--mosaik .fotos-kachel__symbol img {
    max-width: 100%;
}