@layer base-styles {
  .video-content-v3 {
    display: grid;
    grid-template: "main"/1fr;
  }
  .video-content-v3__video-container {
    display: grid;
    grid-template: "video"/1fr;
    grid-area: main;
    opacity: 0;
    pointer-events: none;
    height: 100%;
    width: 100%;
    background-color: black;
    transition: opacity 0.5s, background-color 1s;
    z-index: -1;
  }
  @media screen and (min-width: 768px) {
    .video-content-v3__video-container {
      -o-object-fit: cover;
      object-fit: cover;
      grid-area: main;
    }
  }
  .video-content-v3__video-container.video-playing {
    pointer-events: all;
    opacity: 1;
    z-index: 10;
  }
  .video-content-v3__video-container.lock-video-aspect-to-image iframe,
  .video-content-v3__video-container.lock-video-aspect-to-image video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .video-content-v3__video-container.set-video-to-cover iframe,
  .video-content-v3__video-container.set-video-to-cover video {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }
  .video-content-v3__video-container .loading-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(84 / var(--desktop-design-reference) * var(--screen-width-static));
    height: calc(84 / var(--desktop-design-reference) * var(--screen-width-static));
    --spinner-bg-colour: #ffffff54;
    --spinner-colour: white;
  }
  .video-content-v3__video-container .loading-wrapper:before {
    content: "";
    top: 0;
    left: 0;
    width: calc(84 / var(--desktop-design-reference) * var(--screen-width-static));
    height: calc(84 / var(--desktop-design-reference) * var(--screen-width-static));
    position: absolute;
    border-radius: 50%;
    border-right: solid calc(5 / var(--desktop-design-reference) * var(--screen-width-static)) var(--spinner-bg-colour);
    border-left: solid calc(5 / var(--desktop-design-reference) * var(--screen-width-static)) var(--spinner-bg-colour);
    border-top: solid calc(5 / var(--desktop-design-reference) * var(--screen-width-static)) var(--spinner-bg-colour);
    border-bottom: solid calc(5 / var(--desktop-design-reference) * var(--screen-width-static)) var(--spinner-colour);
    animation: rotate 1s linear infinite;
  }
  .video-content-v3__video-play-button {
    grid-area: main;
    place-self: center;
    transform: scale(1);
    transition: transform 0.3s 0.5s;
  }
  .video-content-v3__video-play-button.video-playing {
    transform: scale(0);
    transition: transform 0.5s;
    opacity: 0;
    pointer-events: none;
    max-height: 0px;
  }
  .video-content-v3__video-inner-container {
    grid-area: video;
    display: flex;
    width: 100%;
    position: relative;
  }
  .video-content-v3__video-inner-container iframe {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .video-content-v3__video-player {
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
  }
  .video-content-v3:has(.video-playing) {
    z-index: 99;
  }
}