/* 262-php-11-lightbox.css
   ============================================================
   Nur das Raster der Vorschaubilder. Der Betrachter selbst
   bringt sein Aussehen aus vendor/jquery.fancybox.min.css mit
   und wird hier NICHT umgestylt — sonst weicht er von der
   Vorlage im Style Guide ab.
   ============================================================ */

.x262-lightbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.x262-lightbox__item {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface-2, #f4f2ee);
    aspect-ratio: 4 / 3;
}

.x262-lightbox__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.x262-lightbox__item:hover img,
.x262-lightbox__item:focus-visible img { transform: scale(1.04); }

/* Der Zeiger sagt, dass sich etwas oeffnet. */
.x-gallery a[data-fancybox],
.x262-lightbox__item { cursor: zoom-in; }