/* Keep the picture's composition when the short hero film takes over. */
.hero-film video {
  object-position: 50% 35%;
}

/* Avoid a parallax-to-video crop jump while the first frame is loading. */
.motion-ready .hero-film[data-video-state]:not([data-video-state="unavailable"]) picture img {
  transform: none;
  will-change: auto;
}

.hero-film .media-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  top: 25px;
  right: 40px;
  line-height: 1.2;
  background: rgb(11 31 68 / 88%);
  backdrop-filter: blur(8px);
}

.hero-film .media-control svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  .hero-film .media-control {
    top: 15px;
    right: 25px;
  }
}