*{box-sizing:border-box}
html{background:#fff}
body{margin:0;background:#fff;color:#111;font-family:Arial,sans-serif}
.gallery{width:min(1380px,94vw);margin:4vw auto 8vw;columns:3 280px;column-gap:clamp(16px,2.8vw,40px)}
.photo{break-inside:avoid;margin:0 0 clamp(16px,2.8vw,40px);cursor:zoom-in}
.photo img{display:block;width:100%;height:auto}
.viewer{position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:100;display:none;align-items:center;justify-content:center}
.viewer.open{display:flex}
.viewer img{max-width:92vw;max-height:92vh;object-fit:contain}
.viewer button{position:absolute;border:0;background:none;color:#111;cursor:pointer;font-size:28px;padding:10px}
.viewer-close{right:24px;top:14px}
.viewer-prev{left:20px;top:50%;transform:translateY(-50%)}
.viewer-next{right:20px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){
 .gallery{width:94vw;columns:2;column-gap:12px;margin-top:3vw}
 .photo{margin-bottom:12px}
 .viewer img{max-width:88vw;max-height:88vh}
 .viewer-close{right:10px;top:8px}
 .viewer-prev{left:6px}
 .viewer-next{right:6px}
}
@media(max-width:430px){
 .gallery{columns:1;width:92vw}
}