.imgContainer{
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95%;
  padding-top: 20px;
}

.previewLine {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.imgContainer {
  width: 25%;
  padding : 10px;
}

.horizontalPicture {
  opacity: 1;
  display: block;
  backface-visibility: hidden;
}

img {
  max-height: 70px;
  width: auto;
}

#gonzai {
  max-height: 60px;
}

#jack {
  max-height: 90px;
}

#les-aiguilleurs {
  max-height: 100px;
}

#paris-2024 {
  max-height: 180px;
}

#lazard {
  max-height: 60px;
}

#axa, #orange {
  max-height: 120px;
}

#ffgolf {
  max-height: 170px;
}

.imgContainer:hover .projectTitle {
  opacity: 1;
}

.imgContainer:hover .horizontalPicture {
  opacity: 0.6;
  cursor: pointer;
}

@media only screen and (max-width: 720px){
  .previewLine {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .imgContainer{
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    width: 100%;
  }
  .imgContainer img {
    height: auto;
    width: 80%;
  }
  #gonzai, #jack, #les-aiguilleurs, #paris-2024, #lazard {
    height: auto;
    width: 70%;
  }


  #axa, #orange {
    max-height: 120px;
  }

}