:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;background:#080808}
main{display:grid;gap:3px;width:100%;max-width:680px;margin:0 auto;padding:3px}
.row{display:grid;gap:3px;min-width:0;width:100%;overflow:hidden}
.row-4{grid-template-columns:repeat(4,minmax(0,1fr));height:clamp(138px,42vw,228px)}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr));height:clamp(178px,55vw,290px)}
.row-2{grid-template-columns:repeat(2,minmax(0,1fr));height:clamp(220px,72vw,380px)}
.row-1{grid-template-columns:1fr;height:clamp(250px,85vw,420px)}
.tile{display:block;position:relative;min-width:0;height:100%;overflow:hidden;background:#171717;outline-offset:-3px}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .3s ease,filter .3s ease}
.tile:is(:hover,:focus-visible) img{transform:scale(1.035);filter:brightness(1.08)}
.tile:focus-visible{outline:2px solid #e6bd58}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}.tile:is(:hover,:focus-visible) img{transform:none}}
@media(min-width:681px){main{gap:4px;padding:4px}.row{gap:4px}}