/* =======================================================
   GALERIE.CSS
   -------------------------------------------------------
   - Vorschau-Bild
   - Thumbnail-Galerie
   - Scrollverhalten
   - Responsive Galerie
   ======================================================= */


/* =======================================================
   BLOG – HIGHLIGHT BILD
   ======================================================= */

.preview-container {
    text-align: center;
}


.preview {
    max-width: 100%;
    max-height: 600px;

    width: auto;
    height: auto;

    border-radius: 10px;
}


/* =======================================================
   GALLERY (THUMBNAILS / SCROLL)
   ======================================================= */

.gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;

    margin-top: 15px;
    padding-bottom: 10px;

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}


/* =======================================================
   THUMBNAILS
   ======================================================= */

.gallery img {
    flex: 0 0 auto;

    width: 80px;
    height: 80px;

    border-radius: 6px;
    cursor: pointer;

    object-fit: cover;

    scroll-snap-align: start;
}


/* =======================================================
   RESPONSIVE DESIGN
   ======================================================= */

@media (max-width: 600px) {

    .gallery {
        justify-content: flex-start;
    }

    .gallery img {
        width: 45px;
        height: 45px;
    }
}