/* sobre.css: a página Sobre. Embaixo da faixa verde com o vídeo (mais baixa, faixa-video.css), o que é o programa e
   quando sai de um lado e, do outro, quem faz e o endereço do feed, em dois cartões creme; duas colunas no computador.
   Depende de: base.css, faixa-video.css e pessoa.css. Telefone nas regras soltas, computador no @media do fim. */

.sobre { padding: 32px 0 16px; }

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

.sobre__titulo { font-size: 30px; }

.sobre__descricao { margin-top: 16px; font-size: 17px; color: var(--texto-suave); }

.sobre__ritmo { margin-top: 20px; }

.sobre__cartoes { display: grid; gap: 16px; }

.sobre__cartao {
  display: grid; gap: 14px; align-content: start; padding: 22px 20px; border-radius: var(--raio);
  background: var(--creme-claro); box-shadow: 0 2px 0 var(--linha);
}

.sobre__nota { font-size: 15px; color: var(--texto-suave); }

@media (min-width: 900px) {
  .sobre { padding: 64px 0 24px; }
  .sobre__dentro { grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; }
  .sobre__titulo { font-size: 44px; }
  .sobre__descricao { font-size: 19px; }
  .sobre__cartao { padding: 28px; }
}