:root{--gap:12px;--bg:#111;--card:#0f1720;--accent:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--accent);padding:20px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap);max-width:1200px;margin:0 auto}
.item{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:8px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.item img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .25s}
.item:hover img{transform:scale(1.03)}
figcaption{padding:8px 10px;font-size:14px;color:#ddd}
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:999;visibility:hidden;opacity:0;transition:.2s}
.lightbox[aria-hidden="false"]{visibility:visible;opacity:1}
.lb-content{max-width:90%;max-height:80%;text-align:center}
.lb-content img{max-width:100%;max-height:70vh;border-radius:6px}
.lb-close,.lb-prev,.lb-next{position:fixed;background:transparent;border:0;color:#fff;font-size:28px;padding:12px;cursor:pointer}
.lb-close{top:18px;right:18px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
#lb-caption{color:#ddd;margin-top:8px;font-size:14px}
@media (max-width:520px){.item img{height:140px}}