/* ============================================================
   GALLERY — responsive flex grid, even 8px gap (between rows AND
   columns), centered last row, subtle hover zoom (clipped).

   Width is capped by the .container-fluid (max-width:1800px); on
   mobile the container's 15px padding is the gap between the
   images and the screen edge. Flexbox (not grid) so a short last
   row centers via justify-content instead of sitting left.

   Fills: local-includes/gallery-{townslug}.cfm
   Variables come from service-area.css. Loaded by
   css-service-area.cfm.
   ============================================================ */
.geo-gallery-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* basis = full width minus the gaps, divided by the number of photos across.
   n across => (n-1) gaps. */
.geo-gallery-row .single-image-modal {
    flex: 0 0 calc((100% - 5 * 8px) / 6); /* 6 across */
    max-width: calc((100% - 5 * 8px) / 6);
    overflow: hidden;
    /* same radius as the .geo-image inside — the wrapper clips the hover zoom,
       and without its own radius the zoomed corners would turn square */
    border-radius: var(--geo-border-radius);
}
@media (max-width: 1199px) {
    .geo-gallery-row .single-image-modal {
        flex-basis: calc((100% - 3 * 8px) / 4); /* 4 across */
        max-width: calc((100% - 3 * 8px) / 4);
    }
}
@media (max-width: 991px) {
    .geo-gallery-row .single-image-modal {
        flex-basis: calc((100% - 2 * 8px) / 3); /* 3 across */
        max-width: calc((100% - 2 * 8px) / 3);
    }
}
@media (max-width: 767px) {
    .geo-gallery-row .single-image-modal {
        flex-basis: calc((100% - 1 * 8px) / 2); /* 2 across */
        max-width: calc((100% - 1 * 8px) / 2);
    }
}
.geo-gallery-row .single-image-modal img {
    transition: transform 0.35s ease;
}
.geo-gallery-row .single-image-modal:hover img,
.geo-gallery-row .single-image-modal:focus img {
    transform: scale(1.08);
}