/* cartao-ep.css: o episódio em miniatura. A .miniatura faz o papel da foto do episódio (o podcast ainda não
   tem foto por episódio): um quadro grafite com o número em amarelo e o tema. A .fileira junta cartões lado a lado
   ("Comece por aqui", "Do mesmo tema"); no telefone ela corre de lado, como no site do Mel Robbins.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.miniatura {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--raio);
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(255, 230, 0, .22), transparent 55%),
    linear-gradient(160deg, var(--grafite-claro), var(--grafite));
  color: var(--branco);
}

.miniatura__tema {
  position: absolute; top: 10px; left: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: .75;
}

.miniatura__numero {
  position: absolute; right: 12px; bottom: 2px;
  font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--amarelo);
}

/* ------------------------------------------------------------ o cartão */

.cartao-ep__link { display: grid; gap: 6px; text-decoration: none; }

.cartao-ep__rotulo { margin-top: 10px; font-size: 13px; text-transform: uppercase; color: var(--tinta-suave); }

.cartao-ep__titulo { font-size: 17px; font-weight: 600; line-height: 1.25; }

.cartao-ep__link:hover .cartao-ep__titulo { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ a fileira */

.fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.fileira > li { scroll-snap-align: start; }

@media (min-width: 900px) {
  .fileira { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; gap: 22px; }
  .fileira--larga { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .fileira--larga .miniatura__numero { font-size: 88px; }
  .fileira--larga .cartao-ep__titulo { font-size: 20px; }
}