/* Media query for width <= 1024px */

@media screen and (max-width: 1024px) {
    .container {
      flex-direction: column;
      padding-block: 20px;
    }
    .gallery {
      width: 100%;
      padding-inline: 5px;
    }
    
  }
  
  /* Media query for width <= 640px */
  
  @media screen and (max-width: 640px) {
    .container {
      flex-direction: column;
      padding-block: 20px;
    }
    .gallery {
      width: 100%;
      padding-inline: 15px;
      grid-auto-rows: 220px;
    }
    .box {
      grid-row: span 1;
      grid-column: span 4;
    }
  
    .box:hover{
      transform: translateZ(50px);
    }
  }