/* sobre.css: a página Sobre. O mesmo vídeo do início, mais baixo (heroi.css), com "Sobre o programa" por cima;
   embaixo, em duas colunas no computador, o que é o programa e quando sai à esquerda e, à direita, quem faz
   (nome em Anton) e o endereço do feed, em cartões.
   Depende de: base.css e heroi.css. Telefone nas regras soltas, computador no @media do fim. */

.sobre { padding: 48px 0 0; }

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

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

.sobre__ritmo { margin-top: 18px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }

.sobre__coluna { display: grid; gap: 16px; align-content: start; }

.sobre__bloco {
  display: grid; gap: 12px; align-content: start; padding: 24px 20px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao);
}

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

.pessoa__nome { font-size: 36px; }

.pessoa__papel { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

.pessoa__bio { color: var(--texto-suave); }

@media (min-width: 900px) {
  .sobre { padding: 72px 0 0; }
  .sobre__dentro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .sobre__descricao { font-size: 21px; }
  .sobre__bloco { padding: 28px; }
  .pessoa__nome { font-size: 44px; }
}