.portfolio-section-photos {
  background-color: white;
}

.portfolio-section-photos h2 {
  color: #242424;
  margin-bottom: 20px;
}

.texte-portfolio {
  color: black;
  text-align: justify;
  padding-bottom: 20px;
  margin-left: 0px;
}

.detail-projet {
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap:30px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  }

  
  .detail-projet img {
  width: 325px;
  height: 215px;
  object-fit: cover;
  }

.lien-conteneur-photo {
  position: relative;
}

.lien-conteneur-photo:hover .photo-hover {
  display: flex;
}

@media screen and (max-width: 996px) {
  .grid-paysages {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .grid-portraits {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .detail-projet {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:30px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    }
}


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

  .detail-projet img {
    width: 300px;
    object-fit: cover;
    }

    .detail-projet {
      display:flex;
      flex-wrap: wrap;
      justify-content: center;
      gap:30px;
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
      }

}

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

  .detail-projet img {
    width: 260px;
    object-fit: cover;
    }

    .detail-projet {
      display:flex;
      flex-wrap: wrap;
      justify-content: center;
      gap:30px;
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
      }

}

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

  .detail-projet img {
    width: 100%;
    object-fit: cover;
    }

    .detail-projet {
      display:flex;
      flex-wrap: wrap;
      justify-content: center;
      gap:30px;
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
      }

}