/* // section.images {
//   scroll-snap-type: y mandatory;
//   z-index: 1;
//   width: 100vw;
//   height: 100vh;
//   overflow: scroll;
//   position: absolute;
//   top: 0;
//   left: 0;

//   div.image {
//     box-sizing: border-box;
//     width: 100vw;
//     height: 100vh;
//     object-fit: cover;
//     object-position: center;
//     text-align: center;
//     scroll-snap-align: center;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }

//   img {
//     max-width: 90vw;
//     width: 70vw;
//     height: auto;
//     max-height: 80vh;
//     object-fit: contain;
//     background-color: red;
//   }
// } */

main {
  padding-top: 0;
}

section.introduction {
  width: 100vw;
  height: 100dvh;
  position: fixed;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  /* animation: fadeOut 2s ease-out forwards; */
}

/* Définition de l'animation
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
} */



body.project {
  overflow: hidden;

  .informations {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 1em;


    width: calc(100% - var(--body-padding) * 2);
    position: fixed;
    bottom: 1em;
    z-index: 2;

    h1 {
      font-family: "Irish Grover";
      grid-column: 2/6;
    }

    .description {
      display: flex;
      grid-column: 7/15;
      gap: 1em;



      .description {
        transition: opacity 0.3s ease-in-out;
      }
    }

    .year {
      grid-column: 15/-1;
      text-align: right;
    }
  }

  .swiper {
    width: 100%;
    height: 100dvh;
    box-sizing: border-box;
    position: absolute !important;
    top: 0;
    left: 0;

    justify-content: center;

    .swiper-pagination-fraction {
      text-align: left;
      margin: 1em;

      bottom: 0;
    }

    .swiper-wrapper {

      transition-timing-function: cubic-bezier(0.586, 0, 0, 1);
    }

    .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;

      img,
      video {
        max-width: 85vw;
        max-height: 85vh;
        object-fit: contain;
        height: auto;
        width: 75vw;
      }
    }
  }
}

main .bg-swiper {

  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;

  pointer-events: none;
  z-index: -1;


  /* transition-duration: calc(var(--animation-duration) * 2);
  transition-timing-function: var(--animation-easing);







*/

}

main .bg-swiper .bg-color {
  width: 100vw;
  height: 100dvh;
  z-index: -1;
}

main .bg-swiper .swiper-slide {
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: fill;

}

main .bg-swiper .swiper-slide img {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  object-fit: cover !important;

}

@media (width < 960px) {


  body.project {

    .informations {
      top: calc(var(--body-padding));
      grid-template-rows: auto 1fr;
      gap: 0 .5em;
      pointer-events: none;

      h1 {
        font-family: "Lexicon";
        grid-column: 6 / 15;
        font-size: 100%;
      }

      .description {
        display: flex;
        grid-column: 1 / 12;
        grid-row: 2;
        gap: 1em;
      }

      .year {
        grid-column: 15 / -1;
        text-align: right;
        grid-row: 2;
      }

    }

    .swiper {

      .swiper-pagination {
        text-align: right;
        top: var(--body-padding);
        margin: 0;
        padding-right: var(--body-padding);
        height: fit-content;
      }

      .swiper-slide {

        img,
        img.landscape,
        img.square,
        video {

          max-width: 92vw;
          width: auto;
          height: 85vh;

          max-height: 80vh;


        }

        img,
        img.portrait,
        video {
          width: 92vw;
        }
      }
    }
  }
}