/* Destaques (Início, C10): grade bento. Base de 390 px; a partir de 1000 px, 4 colunas. */
.destaques { padding-block: var(--e7); }
.destaques .bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.destaques .bento__item--largo { grid-column: 1 / -1; }
.destaques .cartao-foto.bento__item--largo { min-height: 220px; }
.destaques .cartao-numero { min-height: 176px; }
/* Mosaico largo vira faixa de 4 miniaturas em qualquer tela: 2 × 2 daria um bloco de 420 px de altura no celular. */
.destaques .cartao-mosaico.bento__item--largo .cartao-mosaico__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 1000px) {
  .destaques .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap: var(--e4); }
  .destaques .bento__item { height: 100%; }
  .destaques .bento__item--largo { grid-column: span 2; }
  .destaques .bento__item--alto { grid-row: span 2; }
  /* A foto encolhe para caber na célula; o texto e o botão mantêm o tamanho. */
  .destaques .cartao-peca { grid-template-rows: minmax(0, 1fr) auto; }
  .destaques .cartao-peca__foto { height: 100%; width: auto; aspect-ratio: 1; justify-self: center }
  .destaques .cartao-mosaico { grid-template-rows: minmax(0, 1fr) auto; }
  .destaques .cartao-mosaico__grade { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .destaques .cartao-mosaico__grade > img { height: 100%; min-height: 0; aspect-ratio: auto; }
}