video-container {
  aspect-ratio: var(--aspect-ratio, 16/9);
  display: block;
  position: relative;
  width: 100%;
  border-radius: 1em;
  overflow: hidden;
  display: grid;
  place-items: center;
  max-width: calc(960px - clamp(64px, 6vh, 128px));
  justify-self: center;
}
video-container > * {
  grid-column: 1;
  grid-row: 1;
}
video-container iframe, video-container canvas, video-container video {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
}
video-container .poster {
  width: 100%;
  display: grid;
  place-items: center;
}
video-container .poster picture.image {
  width: 100%;
  transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
video-container .poster > * {
  grid-column: 1;
  grid-row: 1;
}
video-container .poster .play-button {
  border-radius: 50%;
  background-color: #EF9074;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(40px, 10vw, 100px);
  height: clamp(40px, 10vw, 100px);
  transition: background-color 0.2s cubic-bezier(0.42, 0, 0.58, 1), transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
video-container .poster .play-button svg {
  width: 50%;
  height: 50%;
  color: white;
}
@supports (selector(:has(*))) {
  video-container:has(> iframe) {
    background-color: black;
  }
}
video-container iframe ~ .poster {
  pointer-events: none;
}
video-container iframe ~ .poster .play-button {
  transform: scale(0.5);
  opacity: 0;
}
video-container iframe ~ .poster picture.image {
  opacity: 0;
}
@media (hover: hover) {
  video-container:hover .play-button {
    background-color: #6B0D70;
    transform: scale(1.05);
  }
}
video-container.promo-video {
  max-width: 600px;
  align-self: center;
  justify-self: center;
}
/*# sourceMappingURL=../sourcemaps/components/video.css.map */