.header{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.header .title h1{letter-spacing:.5px}
.header .subtitle{color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid{grid-template-columns:1fr}}
.thumb{position:relative; overflow:hidden; border-radius:16px; outline:1px solid var(--line); background:#eee}
.thumb img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover; transition:transform .25s}
.thumb:hover img{transform:scale(1.03)}
.caption{position:absolute; inset:auto 0 0 0; color:#fff; padding:.6rem .8rem; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55))}
.caption h4{margin:0}
.caption p{margin:0; opacity:.85}

.lightbox{position:fixed; inset:0; display:none; justify-content:center; align-items:center; background:rgba(0,0,0,.6); z-index:50}
.lightbox[aria-hidden="false"]{display:flex}
.lb-panel{background:#111; color:#E5E7EB; border-radius:16px; border:1px solid #2a2a33; display:grid; grid-template-columns:minmax(280px,50vw) minmax(240px,28vw); gap:1rem; padding:1rem; max-width:90vw; max-height:85vh}
.lb-left img{width:100%; height:100%; object-fit:contain; background:#000; border-radius:12px}
.lb-right h2{color:#B3CFF0}
.lb-right p{color:#D1D5DB}
.lb-close{position:absolute; top:12px; right:16px; background:#1e1e26; color:#fff; border:1px solid #373748; border-radius:10px; padding:.4rem .6rem; cursor:pointer}