/* sobre.css: a página Sobre. O vídeo na moldura mais baixa e, embaixo, o texto do programa com a capitular à
   esquerda e, à direita, separados por um filete, quem faz e o endereço do feed.
   Depende de: base.css e moldura.css. Telefone nas regras soltas, computador no @media do fim. */

.sobre { padding: 36px 0 48px; }

.sobre__dentro { display: grid; gap: 36px; }

.sobre__titulo { margin-top: 10px; font-size: 34px; letter-spacing: -0.02em; }

.sobre__descricao { margin-top: 20px; font-size: 18px; line-height: 1.6; }

.sobre__ritmo { margin-top: 18px; font-family: var(--letra-titulo); font-weight: 600; }

.sobre__lado { display: grid; gap: 28px; align-content: start; }

.sobre__bloco { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--tinta); }

.sobre__nota { font-style: italic; font-size: 15px; color: var(--cinza-tinta); }

.pessoa { display: grid; gap: 4px; }

.pessoa__nome { font-size: 24px; }

.pessoa__papel { font-size: 14px; font-style: italic; color: var(--cinza-tinta); }

.pessoa__bio { margin-top: 6px; color: var(--cinza-tinta); }

@media (min-width: 900px) {
  .sobre { padding: 56px 0 72px; }
  .sobre__dentro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
  .sobre__titulo { font-size: 48px; }
  .sobre__descricao { font-size: 20px; }
  .sobre__lado { padding-left: 40px; border-left: 1px solid var(--filete); }
  .sobre__bloco:first-child { padding-top: 0; border-top: 0; }
}