.sm-header-video-host-v284 {
  position: relative;
}

.sm-header-video-v284 {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: opacity 180ms ease-out;
}

.sm-header-video-v284[data-ready="true"] {
  opacity: 1;
}

.sm-header-video-host-v284.sm-header-video-underlay-paused-v284 > :not(.sm-header-video-v284),
.sm-header-video-host-v284.sm-header-video-underlay-paused-v284 > :not(.sm-header-video-v284) * {
  animation-play-state: paused !important;
}

.sm-header-video-host-v284.sm-header-video-underlay-paused-v284 > svg {
  visibility: hidden !important;
}

.sm-header-video-v284 > picture,
.sm-header-video-v284 > picture > img,
.sm-header-video-v284 > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sm-header-video-v284 > picture > img,
.sm-header-video-v284 > video {
  object-fit: var(--sm-header-video-fit, cover);
  object-position: var(--sm-header-video-position, 50% 50%);
}

.sm-header-video-v284 > picture > img {
  opacity: 1;
}

.sm-header-video-v284 > video {
  opacity: 0;
}

.sm-header-video-v284[data-playing="true"] > video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sm-header-video-v284 {
    transition: none;
  }

  .sm-header-video-v284 > video {
    display: none;
  }
}