/* Version: 20-09-2026-16-46 */
/* Grille module « Galerie » (albums) + grille photos sur fiche production (id dédié pour éviter la confusion avec le lien Galerie du menu) */
#gallery,
#production-show-photos-grid {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 20px;
	overflow-x: clip;
}

@media screen and (max-width: 1439px) and (min-width: 901px) {
  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#gallery a,
#production-show-photos-grid a {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  height:0;
  width:100%;
  padding:2% 2% 100% 2%;
  transition:
    box-shadow 0.3s ease-in-out,
    border 0.3s ease-in-out,
    filter 0.3s ease-in-out,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s linear;
}

#gallery a:hover,
#production-show-photos-grid a:hover {
  transform: var(--portfolios-thumbnail-hover-transform, none);
  filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

#gallery a:active,
#production-show-photos-grid a:active {
  transform: var(--portfolios-thumbnail-click-transform, none) !important;
  transition: transform 0.1s ease;
}

#gallery a::after,
#production-show-photos-grid a::after {
  position: absolute;
  top: 0;
  content: "↕";
  height: 100%;
  width: 100%;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.2s linear;
  color: var(--modules-white);
}

#gallery a:hover::after,
#production-show-photos-grid a:hover::after {
  bottom: 0px;
  opacity: 1;
}

#gallery div,
#gallery a,
#production-show-photos-grid div,
#production-show-photos-grid a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

#gallery a img,
#production-show-photos-grid a img {
  display: none;
}

@media screen and (max-width: 900px) {

  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr;
  }

}

/* Accueil : 2 lignes selon les colonnes (la page Galerie affiche tout) */
@media screen and (max-width: 620px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+3) {
    display: none;
  }
}

@media screen and (min-width: 621px) and (max-width: 900px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 901px) and (max-width: 1439px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (max-width: 620px) {

  #gallery,
  #production-show-photos-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }

  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr;
  }

}