/* --- Styly pro Galerii (gallery-styles.css) --- */

.gallery-grid {
    display: grid;
    /* Vytvoření mřížky se 3 sloupci. Při malé šířce se automaticky změní na méně. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; /* Mezera mezi obrázky */
    margin-top: 30px;
}

.gallery-item {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Důležité pro oříznutí obrázku */
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: 300px; /* Fixní výška pro jednotný vzhled */
    object-fit: cover; /* Obrázek vyplní celý prostor bez deformace */
    display: block;
    transition: transform 0.3s;
}

.gallery-item img:hover {
    transform: scale(1.05); /* Lehký zoom při najetí myši pro efekt */
}

/* Responsivní úpravy pro menší displeje */
@media (max-width: 768px) {
    .gallery-grid {
        /* Na menších displejích budou jen 2 sloupce */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}
@media (max-width: 480px) {
    .gallery-grid {
        /* Na mobilech bude jen 1 sloupec */
        grid-template-columns: 1fr;
    }
}