@import url('../../structure/root.css');

/* 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%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 20px;
}

#gallery a,
#production-show-photos-grid a {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: 0.2s linear;
  height:0;
  width:100%;
  padding:2% 2% 100% 2%;
}

#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;
  }

}

@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;
  }

}