/* Gallery hero background: custom backdrop image for the gallery landing section. */
.hero--gallery::before {
    background-image: url("images/slideshow/images.jpeg-19.jpg");
}

/* Gallery grid: 12-column layout so featured and standard figures can mix naturally. */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

/* Standard gallery card span: regular items take one-third of the large-screen grid. */
.gallery-card {
    grid-column: span 4;
    padding: 0;
    overflow: hidden;
}

/* Wide gallery card variant: featured figure spans more columns for emphasis. */
.gallery-card--wide {
    grid-column: span 8;
}

/* Tall gallery card variant: portrait-style image for visual variety in the grid. */
.gallery-card--tall img {
    aspect-ratio: 4 / 5;
}

/* Gallery image treatment: crop consistently and support a slight hover zoom. */
.gallery-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.35s ease;
}

/* Gallery hover/focus interaction: subtle scale-up to reward exploration. */
.gallery-card:hover img,
.gallery-card:focus-within img {
    transform: scale(1.04);
}

/* Gallery caption block: spacing for title and supporting description. */
.gallery-card figcaption {
    padding: 1rem 1.15rem 1.2rem;
}

/* Gallery caption title spacing: small gap between the heading and the caption text. */
.gallery-card figcaption h3 {
    margin-bottom: 0.45rem;
}

/* Tablet layout: reduce the gallery to two columns while keeping cards balanced. */
@media (max-width: 980px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-card,
    .gallery-card--wide {
        grid-column: auto;
    }
}

/* Phone layout: switch to a single-column gallery for comfortable vertical browsing. */
@media (max-width: 560px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}