/* works */
.grid{column-count:3;column-gap:16px}
.grid figure{margin:0 0 16px;break-inside:avoid;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.grid a{display:block;cursor:zoom-in}
.grid img{display:block;width:100%;height:auto;transition:opacity .2s}
.grid a:hover img{opacity:.85}
.grid figcaption{padding:9px 12px;font-size:12px;color:var(--ink3);letter-spacing:.04em}
.grid.sq{column-count:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid.three{column-count:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.grid.sq figure,.grid.three figure{margin:0}
@media (max-width:860px){.grid{column-count:2}.grid.sq{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid{column-count:1}.grid.sq{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr}}
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb img{max-width:100%;max-height:calc(100vh - 90px);object-fit:contain;border-radius:6px;cursor:e-resize}
.lb p{margin:14px 0 0;font-size:13px;color:var(--ink2);letter-spacing:.04em}
.lb .x{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--ink);font-size:32px;line-height:1;cursor:pointer;font-family:var(--sans)}