/* sobre.css: a página Sobre. O mesmo vídeo do início, mais baixo, numa faixa larga de cantos redondos com a sombra
   rosa-chá, e embaixo o que é o programa, quando sai, quem faz e o endereço do feed, em duas colunas no computador.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.sobre-video { padding: 4px 0 40px; }

.sobre-video__moldura {
  position: relative; height: 210px; overflow: hidden;
  border-radius: var(--raio); background: var(--rosa-cha);
  box-shadow: -10px 10px 0 var(--rosa-cha);
}

/* o scale corta a beira preta de 3 px que vem em cima e embaixo no próprio vídeo */
.sobre-video__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.02); }

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

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

.sobre__dentro > * { min-width: 0; }

.sobre__titulo { font-size: 34px; }

.sobre__descricao { margin-top: 18px; font-size: 19px; color: var(--tinta-suave); }

.sobre__ritmo {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 20px;
  font-weight: 700; color: var(--vinho);
}
.sobre__ritmo::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--vinho); box-shadow: 0 0 0 4px var(--rosa-cha);
}

.sobre__bloco { display: grid; gap: 12px; align-content: start; }

.sobre__bloco + .sobre__bloco { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--linha); }

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

.pessoa__nome { font-size: 26px; }

.pessoa__papel { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca); }

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

@media (min-width: 900px) {
  .sobre-video { padding: 12px 0 72px; }
  .sobre-video__moldura { height: min(34vw, 400px); border-radius: 40px; box-shadow: -18px 18px 0 var(--rosa-cha); }
  .sobre { padding: 96px 0; }
  .sobre__dentro { grid-template-columns: 1.3fr 1fr; gap: 96px; }
  .sobre__titulo { font-size: 50px; }
}