main.project-wrapper {
  height: 100dvh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  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;
}


/* 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: 92px;
  overflow: visible;
  opacity: 0.5;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  outline: none !important;
}

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

.project-nav--thumb 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 (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;
  }
}