.flexible.grille_video,
.block-video-grid {
  .video-poster {
    @apply absolute top-0 left-0 w-full h-full object-cover opacity-100 transition-opacity duration-1000 ease-out z-10;
    &.hide {
      @apply opacity-0;
    }
  }
  .video-element {
    @apply absolute top-0 left-0 w-full h-full object-cover z-0;
  }
  .video-item {
    @apply bg-black;
    &:hover {
      .video-poster {
        @apply opacity-0;
      }
    }
  }
  .video-titre {
    @apply text-white text-center w-full font-heading leading-tight tracking-[0.15rem] text-sm xl:text-[1.2rem] uppercase;
  }

  .slick-slide {
    height: calc(100vh - 160px);
    @screen md {
      height: calc(100vh - 80px);
    }
    > div,
    .video-item,
    .video-wrapper {
      @apply w-full h-full;
    }

    .video-overlay {
      @apply absolute top-0 left-0 w-full h-full bg-black opacity-30;
    }
  }
  .slick-dots {
    bottom: 10px;
    li button {
      background-color: white;
    }
  }
}
