/* 原動畫已預先合成；此處只縮放單一影片，不在瀏覽器內疊合圖層。
   RWD 條件需與 components/hero.html 的 picture 及 js/hero-player.js 一致。 */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #80bfbd;
}
.hero-poster, .hero-poster img, .hero-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-video { visibility: hidden; }
.hero.has-frame .hero-video { visibility: visible; }
.hero.has-frame .hero-poster { visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero { aspect-ratio: 3 / 4; }
}