main.project-wrapper {
  height: 100dvh;
  display: grid;
    --project-thumb-slot: 92px;
  grid-template-columns: var(--project-thumb-slot) minmax(0, 1fr) var(--project-thumb-slot);
  grid-template-rows: minmax(0, 1fr) auto;
  
  align-items: center;
  gap: 10%;
  box-sizing: border-box;
  touch-action: pan-y;
  padding: var(--spacer-xlg) 10% var(--spacer-lg);
}

.project-media {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  outline: none !important;
}

.project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  will-change: opacity;
}


.project-media > .project-video,
.project-media > .project-lightbox-link {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.project-video iframe {
  display: block;
  border: 0;
}

.project-video--landscape iframe {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}

.project-video--portrait iframe {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
}

/* Previous, next & close buttons*/
.project-nav {
  align-self: center;
  justify-self: center;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.project-nav:hover {
  opacity: 1;
}

.project-nav--prev {
  grid-column: 1;
}

.project-nav--next {
  grid-column: 3;
}

.project-meta {
  grid-column: 2;
  margin: 0;
  text-align: center;
  margin-top: var(--spacer-md);
}

.project-nav--thumb {
  width: var(--project-thumb-slot);
  overflow: visible;
  opacity: 0.5;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-nav--thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* .project-nav--thumb[data-media-type="video"] img {
  display: block;
  object-fit: cover;
} */

.project-nav--thumb[data-media-type="video"] img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}



.project-media,
.project-nav--thumb {
  position: relative;
}

/* Glightbox */
.glightbox-container .gslide-image {
  padding: var(--spacer-xlg);
  cursor: default !important;
}

.glightbox-container .gslide-image img {
  max-height: calc(100vh) !important;
  max-width: calc(100vw - var(--spacer-xlg) * 2) !important;
  cursor: default !important;
  pointer-events: none !important;
  user-select: none !important;
}

.glightbox-container .gclose svg {
  display: none !important;
}

.glightbox-container .gclose {
  position: fixed !important;
  top: 20px !important;
  right: 35px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: center / contain no-repeat
    url("/assets/media/icons/LD-Picto_croix.svg") !important;
  background-color: transparent !important;
  opacity: 0.85 !important;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
}

.glightbox-container .gclose:hover {
  opacity: 1 !important;
  background-image: url("/assets/media/icons/LD-Picto_croix_sombre.svg") !important;
  background-color: transparent !important;
}

.dark .glightbox-container .gclose {
  filter: invert(1) !important;
}

.gprev,
.gnext {
  display: none !important;
}

.gslide-media {
  box-shadow: none !important;
}

@media (min-width: 769px) {
  .glightbox-container .ginner-container {
    width: calc(100vw - var(--spacer-xlg) * 2) !important;
    height: calc(100vh - var(--spacer-xlg) * 2) !important;
    max-width: calc(100vw - var(--spacer-xlg) * 2) !important;
    max-height: calc(100vh - var(--spacer-xlg) * 2) !important;
  }

  .glightbox-container .gslide-media,
  .glightbox-container .gslide-image {
    width: calc(100vw - var(--spacer-xlg) * 2) !important;
    height: calc(100vh - var(--spacer-xlg) * 2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
      padding: 0 !important;

  }

  .glightbox-container .gslide-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

@media (max-width: 768px) {
  .main-nav {
    transition: opacity 0.3s;
  }

  body.project-overlay-open .main-nav, 
  body:has(#wrapper >  main.project-wrapper) .main-nav {
    opacity: 0;
    pointer-events: none;
  }

 main.project-wrapper {
    min-height: 100svh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: var(--spacer-md);
    padding: var(--spacer-xlg) 0px var(--spacer-xlg);

  }

  .project-media {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
    height: calc(100svh - 220px);
    max-height: 72svh;
  }

  .project-meta {
    grid-column: 1;
    justify-self: center;
    margin-top: 0px;
  }

  .project-nav--thumb {
    display: none;
  }

  .project-nav--close {
    top: 22px;
    right: 22px;
  }
}