:root { --gap: 6px; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0b0b0c; color:#fff; }
.top { position: sticky; top:0; z-index:10; padding:12px 14px; background:rgba(11,11,12,.75); backdrop-filter: blur(10px); }
.title { font-weight:700; font-size:16px; letter-spacing:.2px; }

.grid {
  --cols: 3;                 /* default */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 6px;
  padding: 6px;
  transition: grid-template-columns 120ms ease;
}

@media (min-width: 520px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.card { position: relative; width:100%; aspect-ratio: 1 / 1; overflow:hidden; border-radius:10px; background:#1a1a1c; }
.card img { width:100%; height:100%; object-fit: cover; display:block; }

.viewer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
}

.viewer.hidden { display:none; }

.viewer img {
  max-width: 100%;
  max-height: 100%;
  touch-action: pinch-zoom;
}

.close {
  position: fixed;
  top: 14px; right: 14px;
  border: 0;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 18px;
}