/* materia.css: o último episódio como matéria de abertura do início. No computador, duas colunas: à esquerda
   o rótulo, o título grande e a data; à direita o resumo com a capitular vermelha, o player na caixa com filete
   e os botões. No telefone tudo numa coluna, na mesma ordem.
   Depende de: base.css e tocador.css. Telefone nas regras soltas, computador no @media do fim. */

.materia { padding: 36px 0 44px; border-bottom: 1px solid var(--tinta); }

.materia__dentro { display: grid; gap: 22px; }

.materia__titulo { margin-top: 12px; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }

.materia__titulo a { text-decoration: none; }
.materia__titulo a:hover { text-decoration: underline; text-decoration-color: var(--tijolo); text-underline-offset: 6px; text-decoration-thickness: 2px; }

.materia__meta { margin-top: 14px; font-style: italic; font-size: 16px; color: var(--cinza-tinta); }

.materia__com { margin-top: 6px; font-style: italic; font-size: 16px; }

.materia__resumo { font-size: 18px; line-height: 1.55; }

.materia__tocador { margin-top: 22px; }

.materia__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }

@media (min-width: 900px) {
  .materia { padding: 56px 0 64px; }
  .materia__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .materia__titulo { margin-top: 18px; font-size: 54px; }
  .materia__meta { margin-top: 22px; font-size: 18px; }
  .materia__resumo { font-size: 20px; }
  .materia__tocador { margin-top: 28px; }
}