.masonry{ column-count:4; column-gap:12px; }
.masonry .item{ break-inside:avoid; margin-bottom:12px; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:zoom-in; }
.masonry img{ width:100%; height:auto; display:block; }

.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999; }
.lightbox[aria-hidden="false"]{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:10px; }
.lb-close{ position:absolute; top:10px; right:16px; background:transparent; color:#fff; border:none; font-size:2.2rem; cursor:pointer; }

@media (max-width:1024px){ .masonry{ column-count:3; } }
@media (max-width:768px){  .masonry{ column-count:2; } }
@media (max-width:480px){  .masonry{ column-count:1; } }