.photoCollage{

    height: 100vh;
    display: grid;
    grid-template-columns: repeat(18,5vw);
    grid-template-rows:  repeat(18,5vh);
    position: relative;
    width: 100%;

}


.photoCollage .one{
    background-image: url("/photos/photos3.jpg");
    background-size: cover;
    background-position: center;
    grid-column:3/7;
    grid-row: 3/7;
  
}
.photoCollage .two{
    background-image: url("/photos/photos8.jpg");
    background-size: cover;
    background-position: center;
    grid-column:8/14;
    grid-row: 2/10;
    
}
.photoCollage .three{
    background-image: url("/photos/photos2.jpg");
    background-size:cover;
    background-position: center;
    grid-column:15/18;
    grid-row: 3/9;
    position: relative;  
    z-index: 2;
    
   
}
.photoCollage .four{
    background-image: url("/photos/photos6.jpg");
    background-size: cover;
    background-position: center;
    grid-column:2/9;
    grid-row: 8/16;
}


.photoCollage .five{
    background-image: url("/photos/photos4.jpg");
    background-size: cover;
    background-position: center;
    grid-column:11/15;
    grid-row: 8/17;
}

.photoCollage .six{
    background-image: url("/photos/photos9.jpg");
    background-size: cover;
    background-position: center;
    grid-column:16/19;
    grid-row: 8/15;
}



  .photoinfo {
    text-align: center;
    padding: 100px 20px;
    background-color: #707f62; 
    color: #f5f7f4;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  
  .photoinfo h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 2.8rem;
    color: #f5f7f4;
    letter-spacing: 1px;
  }
  
  .photoinfo a.btn {
    display: inline-block;   
    margin-top: 10px;        
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #707f62;            
    background-color: #f5f7f4;
    border:  none;
    padding: 12px 28px;
    border-radius: 50px;
    transition: all 0.3s ease;
  }
  
  .photoinfo a.btn:hover {
    background-color: #2f3b2f; 
    color: #f5f7f4;
    text-decoration: none;
  }
  



.infotwo p {
    margin-top: 100px;
    margin-left: 40px;
    font-size: 45px;
    font-family: "Playfair Display", serif;
    font-weight: 100;
    color: white;
    text-align: start;
}



@media (max-width: 550px){
  .photoCollage{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(110px, 22vh);
    gap: 8px;
    padding: 8px;
    height: 630px;             
    width: 100%;
    box-sizing: border-box;
  }

  
  .photoCollage .six,
  .photoCollage .five,
  .photoCollage .three{
    display: none !important;
    background-image: none !important; 
  }

  
  .photoCollage .four,
  .photoCollage .two,
  .photoCollage .one{
    background-size: cover;
    background-position: center;
  }

  
  .photoCollage .four{ grid-column: 1 / 7; aspect-ratio: 16 / 9; } 
  .photoCollage .two { grid-column: 1 / 4; grid-row: 2/ 8;  } 
  .photoCollage .one  { grid-column: 4 / 7; grid-row: 2 / 8;  } 
  .photoinfo h3 {font-size: 1.6rem ;}
  .photoinfo a.btn {padding: 8px 18px; font-size: 12px; }
}


@media (min-width: 551px) and (max-width: 768px){
  .photoCollage{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(120px, 24vh);
    gap: 10px;
    height: auto;
  }
  .photoCollage .six,
  .photoCollage .five,
  .photoCollage .three{ display:none !important; background-image:none !important; }
  .photoCollage .four{ grid-column: 1 / 7; aspect-ratio: 16 / 9; }
  .photoCollage .two { grid-column: 1 / 4; aspect-ratio: 3 / 4;  }
  .photoCollage .one  { grid-column: 4 / 7; aspect-ratio: 3 / 4; }
}