/* moldura.css: o vídeo do alto (a câmera do estúdio se montando e se desmontando em loop) numa moldura fina:
   um traço de 1px de tinta com uma folga de papel por dentro, e a legenda em itálico embaixo, como foto de revista.
   No Sobre a moldura é mais baixa (.moldura--baixa).
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.moldura { margin: 20px auto 0; }

.moldura__quadro { padding: 6px; border: 1px solid var(--tinta); background: var(--papel-claro); }

/* height: auto por cima do height="720" da marcação: quem manda na altura é a proporção. Um fio mais baixa que
   16:9 pra cortar a linha escura que o vídeo tem na primeira fileira de pixels. */
.moldura__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8.7; object-fit: cover; object-position: 50% 40%; background: var(--tinta); }

.moldura__legenda { margin-top: 10px; font-style: italic; font-size: 14px; color: var(--cinza-tinta); text-align: center; }

.moldura--baixa .moldura__video { aspect-ratio: 16 / 7; }

@media (min-width: 900px) {
  .moldura { margin-top: 28px; }
  .moldura__quadro { padding: 10px; }
  .moldura__legenda { margin-top: 12px; font-size: 15px; }
  .moldura--baixa { width: min(900px, 100% - 2 * var(--margem)); }
  .moldura--baixa .moldura__video { aspect-ratio: 21 / 9; }
}