/* GALLERY + LIGHTBOX */

.gallery {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:15px;
    padding:15px;
}
.photo {
    position:relative;
    width:100%;
    padding-bottom:100%;
    overflow:hidden;
    border-radius:8px;
    background:#000;
    -webkit-mask-image:radial-gradient(circle,#000 98%,transparent 100%);
    mask-image:radial-gradient(circle,#000 98%,transparent 100%);
}
.photo::before {
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background-image:var(--bg);
    background-size:cover;
    background-position:center;
    filter:blur(18px) brightness(.7);
    transform:scale(1.2);
    z-index:0;
    pointer-events:none;
}
.photo img {
    position:absolute;
    top:50%; left:50%;
    width:100%; height:100%;
    object-fit:contain;
    transform:translate(-50%,-50%);
    z-index:2;
    cursor:zoom-in;
    border-radius:0;
}
.caption {
    text-align:center;
    margin-top:6px;
    font-size:14px;
    color:#535353;
    letter-spacing:1px;
}
.lightbox {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    justify-content:center;
    align-items:center;
    backdrop-filter:blur(8px);
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:9999;
}
.lightbox.show {
    opacity:1;
    pointer-events:auto;
}
.lightbox img {
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
    border-radius:10px;
    box-shadow:0 0 30px rgba(0,0,0,.5);
    transform:scale(.95);
    transition:.25s;
}
.lightbox.show img { transform:scale(1); }

@media only screen and (max-width:999px) {

/* Gallery breakpoints */
@media(max-width: 700px) {
    .gallery { grid-template-columns:repeat(2, 1fr); }
}
@media(max-width: 450px) {
    .gallery { grid-template-columns:repeat(1, 1fr); }
}
}