/* // 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;
//   }
// } */

section.introduction {
  width: 100vw;
  height: 100vh;
  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: 100%;
    position: fixed;
    bottom: 1em;
    z-index: 2;

    .context {
      display: flex;
      grid-column: 5/10;
      gap: 1em;

      h1 {
        font-family: "Irish Grover";
      }

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

    .year {
      grid-column: 12/-1;
    }
  }

  .swiper {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    position: absolute !important;
    top: 0;
    left: 0;
    // background-color: rgba(90, 65, 255, 0.303);
    justify-content: center;

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

      bottom: 0;
    }

    .swiper-wrapper {
      // transition-timing-function:
    }

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

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