/* Varied mosaic tiles; Isotope animates their positions and filtering. */
.photo-gallery-grid {
    --gallery-unit: clamp(120px, 18vw, 220px);
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}

.photo-gallery-grid.has-isotope { display: block; }
.photo-gallery-sizer { width: 25%; }
.photo-gallery-item {
    width: 25%;
    height: var(--gallery-unit);
    padding: 6px;
    box-sizing: border-box;
}
.photo-gallery-item--wide,
.photo-gallery-item--large { width: 50%; }
.photo-gallery-item--tall,
.photo-gallery-item--large { height: calc(var(--gallery-unit) * 2); }
.photo-gallery-item[hidden] { display: none; }

.photo-gallery-item .cert-gallery-photo {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bs-secondary-bg, #eee);
}
.photo-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.photo-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 2rem 0.75rem 0.75rem;
    color: white;
    font-size: 0.875rem;
    line-height: 1.3;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    pointer-events: none;
}
.cert-gallery-photo:hover img,
.cert-gallery-photo:focus-visible img { transform: scale(1.04); }
.cert-gallery-photo:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: -3px; }

@media (max-width: 767.98px) {
    .photo-gallery-grid { --gallery-unit: clamp(140px, 30vw, 230px); }
    .photo-gallery-sizer,
    .photo-gallery-item { width: 33.333333%; }
    .photo-gallery-item--wide,
    .photo-gallery-item--large { width: 66.666667%; }
}
@media (max-width: 479.98px) {
    .photo-gallery-grid { --gallery-unit: 160px; }
    .photo-gallery-sizer,
    .photo-gallery-item { width: 50%; }
    .photo-gallery-item--wide,
    .photo-gallery-item--large { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .photo-gallery-item img { transition: none; }
}