header{
    height: 100vh;
    background-image: url(/img/fond/fond_portefolio.webp);
    background-size: cover;
    background-position: top;
}

header div{
    width: 100%;
    height: 100%;
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    color: rgb(255, 255, 255);
    background: linear-gradient(0deg,rgba(37, 33, 30, 1) 0%, rgba(255, 255, 255, 0.04) 100%);
}

header span{
    margin: 20px;
}

header h1{
    font-size: 8vw;
}

header h4{
    font-size: 1.2vw;
}

header a{
    color: rgb(0, 0, 0);
    text-decoration: underline;
}

@media screen and (max-width:800px) {
    header h1{
    font-size: 12vw;
}

header h4{
    font-size: 1.8vw;
}
}

@media screen and (max-width:425px) {
        header h1{
    font-size: 15vw;
    text-align: center;
}

header h4{
    font-size: 4vw;
    padding: 20px;
}
}

.banner{
    text-align: center;
    padding: 10px;
    margin: 30px;
}

#section1{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section1 h2{
        color: rgb(0, 0, 0);
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
}















#grid {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 350px;
  gap: 5px;
  grid-auto-flow:dense;
  padding: 5px;
  margin-top: 50px;
}

@media screen and (max-width: 550px) {
  #grid{
    grid-template-columns: none;
    grid-auto-rows: auto;
  }
  
}

#pic-1,
#pic-3,
#pic-5,
#pic-8,
#pic-12 {
      grid-row: span 2;

}

#pic-4,
#pic-6,
#pic-11{
  grid-column: span 2;
}

#pic-2,
#pic-9,
#pic-7,
#pic-10{
  grid-column: span 2;
  grid-row: span 2;
}

#pic-13{
    display: none;
}

@media screen and (max-width: 1799px) {
    #pic-12{
        display: none;
    }
    
}

@media screen and (max-width: 1438px){
    #pic-13{
        display: flex;
        grid-row: span 2;
    }
}
@media screen and (max-width: 1077px){
    #pic-13{
        display: none;
    }
}


.grid-img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
  transition: transform 0.2s ease;
}



#pic-14,
#pic-15,
#pic-16,
#pic-20,
#pic-21,
#pic-23 {
      grid-row: span 2;

}


#pic-17,
#pic-18,
#pic-19,
#pic-22,
#pic-24,
#pic-25{
  grid-column: span 2;
  grid-row: span 2;
}

@media screen and (max-width: 2161px) {
    #pic-24,
#pic-25{
display: none;
}
}

@media screen and (max-width: 1799px) {
    #pic-24{
display: flex;
}
}

@media screen and (max-width: 1438px) {
    #pic-24,
#pic-25{
display: none;
}
}

#pic-26,
#pic-28,
#pic-29,
#pic-31,
#pic-33{
      grid-row: span 2;

}


#pic-27,
#pic-30,
#pic-32,
#pic-34,
#pic-35{
  grid-column: span 2;
  grid-row: span 2;
}

@media screen and (max-width: 1799px) {
    #pic-35{
display: none;
}
}

@media screen and (max-width: 1438px) {
    #pic-35{
display: flex;
    grid-column: span 1;
         grid-row: span 2; 
}

#pic-34{
    grid-column: span 1;
         grid-row: span 2; 
}
}