@use '../utilities';
@use '../components/wave-img';

/* Page: Accueil */
.page-template-accueil {
  .video-container {
    position: relative;

    h1 {
      position: absolute;
      z-index: 4;
      left: 10vw;
      bottom: utilities.space(5);
      color: utilities.$text-light;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }
}

@media screen and (width >= 768px) {
  .page-template-accueil {
    .line-up-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
    }
  }
}

@media screen and (width >= 1280px) {
  .page-template-accueil {
    .video-container {
      height: calc(100vh - 11.4rem);

      h1 {
        left: max(10%, calc((100% - 144rem) / 2));
      }
    }

    .line-up__artistes {
      margin-bottom: utilities.space(4);
    }
  }
}