.gallery-section {
    max-width: calc(var(--container-6xl, 72rem) + 4rem);
    margin: 0 auto;
    padding: clamp(5rem, 10vw, 10rem) 2rem;
}

.gallery-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    margin-bottom: 3rem;
}

.gallery-heading p { color: #bfbfbf; font-size: 1.125rem; }
.gallery-grid {
    --gallery-columns: 2;
    --gallery-gap: 3px;
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
    gap: var(--gallery-gap);
    align-items: start;
}
.gallery-grid.is-masonry { grid-auto-rows: 1px; row-gap: 0; }
.gallery-item { margin: 0; min-width: 0; }
.gallery-image-link { display: block; position: relative; cursor: zoom-in; }
.gallery-image-link img { width: 100%; height: auto; display: block; }
.gallery-open {
    position: absolute;
    right: .625rem;
    bottom: .625rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: rgb(0 0 0 / 65%);
    color: #fff;
    border-radius: 50%;
    pointer-events: none;
}
.gallery-open svg { width: 1rem; height: 1rem; }

.gallery-section a:focus-visible, .gallery-lightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.gallery-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1.5rem;
    border: 0;
    background: #000;
    color: #fff;
}
.gallery-lightbox::backdrop { background: #000; }
.gallery-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.25rem; }
.gallery-lightbox-header, .gallery-lightbox-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.gallery-lightbox-header h2 { font-size: 1.25rem; }
.gallery-lightbox button { padding: .75rem 1rem; border: 1px solid #666; cursor: pointer; font: inherit; }
.gallery-lightbox button:hover { background: #fff; color: #000; }
.gallery-lightbox-stage { min-height: 0; display: grid; place-items: center; }
.gallery-lightbox-stage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-lightbox-caption { font-size: 1.125rem; }
.gallery-lightbox-count { color: #bfbfbf; white-space: nowrap; }
.gallery-lightbox-navigation { display: flex; gap: .75rem; }
html.gallery-is-open { overflow: hidden; }

@media (max-width: 640px) {
    .gallery-grid { --gallery-columns: 1; }

    .gallery-lightbox { padding: 1rem; }
    .gallery-lightbox-footer { flex-wrap: wrap; }
    .gallery-lightbox-caption { flex-basis: 100%; }
    .gallery-lightbox button { min-height: 44px; }
}