.asg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;grid-auto-flow:dense;gap:16px}
.asg__tile{position:relative;margin:0;overflow:hidden;border-radius:6px;background:#1a1512}
.asg__tile picture,.asg__tile img{display:block;width:100%;height:100%}
.asg__tile img{object-fit:cover;object-position:center;cursor:zoom-in;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.asg__tile:hover img{transform:scale(1.03)}
.asg__tile img:focus-visible{outline:2px solid #c4814a;outline-offset:-4px}
.asg__tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .8rem;font-size:.8rem;letter-spacing:.04em;color:#f3ece4;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;pointer-events:none}
.asg__tile:hover figcaption,.asg__tile:focus-within figcaption{opacity:1;transform:none}
.g-xl{grid-column:span 2;grid-row:span 2}.g-wide{grid-column:span 2}.g-tall{grid-row:span 2}.g-tall img{object-position:center 60%}
@media (max-width:1024px){.asg{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:210px;gap:12px}.g-xl{grid-row:span 2}}
@media (max-width:640px){.asg{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px}.asg__tile{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}.g-tall{aspect-ratio:4/5}.asg__tile figcaption{opacity:1;transform:none}}
@media (hover:none){.asg__tile figcaption{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.asg__tile img,.asg__tile figcaption{transition:none}.asg__tile:hover img{transform:none}}