.media-holder {
  @apply overflow-hidden;

  .video {
    &-wrapper {
      @apply overflow-hidden;
      > div:first-child {
        @apply absolute 
        z-[1]
        pointer-events-none
        left-[50%]
        top-[50%]
        translate-x-[-50%]
        translate-y-[-50%]
        opacity-0;
        transition: 0.3s opacity;
      }
      &.started {
        > div:first-child {
          opacity: 1;
        }
      }
      &.autoplay {
        .video-controls {
          @apply hidden;
        }
      }
      &.fullscreen-enabled {
        > div:first-child {
          @apply hidden;
        }
      }
      &.fullscreen-active {
        > div:first-child {
          @apply flex pointer-events-auto;
        }
      }
    }
    &-controls {
      @apply absolute
          z-[2];
    }
  }
}