.grid2 {

    --gap: 16px;
    --num-cols: 4;
    --row-height: 476px;
    box-sizing: border-box;
    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
  
    
  }

  @media (max-width:1028px){

  

    .grid2 {
      --num-cols: 2;
      --row-height: 520px;
      --gap: 20px;
    }
  
    .grid2 img{
     height: 400px;
  
  }
          
  }
  

  @media (max-width:768px){

    .grid2 {
      --num-cols: 1;
      --row-height: 520px;
      --gap: 20px;
    }

    .grid2 img{
     height: 410px;

  }
}

@media (min-width:768px) and (max-width:900px){

  .grid2 {
    --num-cols: 2;
    --row-height: 520px;
    --gap: 20px;
  }

  .grid2 img{
   height: 410px;

}

}