/* --- /static/css/gallery.css --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* changed from 220px to 160px */
    gap: 1.5rem;
    margin-top: 2rem;
}

    /* images */
    .gallery img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        transition: transform .2s ease, box-shadow .2s ease;
    }

        .gallery img:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 16px rgba(0,0,0,.25);
        }

    /* optional caption styling */
    .gallery figcaption {
        margin-top: .4rem;
        font-size: .9rem;
        text-align: center;
        color: #555;
    }