/* RESET BÁSICO */
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif}

/* BODY */
body{
  background:#f2f2f2;
  display:flex;justify-content:center;
  padding:24px;min-height:100vh;
}

/* GRID – mantém 2 colunas enquanto couber 200 px cada, senão 1 coluna */
.grid{
  display:grid;gap:16px;
  width:100%;max-width:460px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

/* TILE (o botão)  – usa aspect-ratio para travar proporção */
.tile{
  display:block;
  border-radius:12px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s ease;
  aspect-ratio: 16 / 9;          /* <<< mantém proporção igual! */
}

.tile:hover{transform:scale(1.04)}

/* A imagem ocupa 100 % do tile sem distorcer */
.tile img{
  width:100%;height:100%;
  object-fit:cover;              /* cobre todo o espaço respeitando a proporção */
  display:block;
}