* { box-sizing: border-box; }
body { margin: 0; background: #0d1017; color: #fff; }
.gallery { columns: 4; column-gap: 16px; padding: 24px; }
.tile { display: block; width: 100%; padding: 0; margin: 0 0 16px; border: 0; background: transparent; break-inside: avoid; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.tile img { display: block; width: 100%; height: auto; }
.tile:focus-visible { outline: 3px solid #c9ff48; outline-offset: 3px; }
.back, .close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff50; border-radius: 50%; color: #fff; background: #171b22e6; text-decoration: none; font: 26px Arial, sans-serif; cursor: pointer; }
.back { position: fixed; left: 32px; top: 32px; z-index: 2; }
dialog { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: #000d; }
dialog img { display: block; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); object-fit: contain; }
.close { position: fixed; right: 24px; top: 24px; }
@media (max-width: 1100px) { .gallery { columns: 3; } }
@media (max-width: 720px) { .gallery { columns: 2; padding: 12px; column-gap: 12px; } .tile { margin-bottom: 12px; } .back { left: 20px; top: 20px; } }
@media (max-width: 380px) { .gallery { columns: 1; } }