.collage{
      width:100%;
      max-width:1100px;

      display:grid;
      grid-template-columns:repeat(4, 1fr);
      grid-auto-rows:200px;
      gap:15px;
    }

    .photo{
      overflow:hidden;
      border-radius:18px;
      position:relative;
      cursor:pointer;
      box-shadow:0 10px 25px rgba(0,0,0,0.3);
      transition:0.4s ease;
    }

    .photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:0.5s ease;
    }

    .photo:hover img{
      transform:scale(1.1);
    }

    .photo:hover{
      transform:translateY(-5px);
    }

    /* Different Sizes */
    .wide{
      grid-column:span 2;
    }

    .tall{
      grid-row:span 2;
    }

    .big{
      grid-column:span 2;
      grid-row:span 2;
    }

    /* Responsive */
    @media(max-width:768px){
      .collage{
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:160px;
      }
    }

    @media(max-width:500px){
      .collage{
        grid-template-columns:1fr;
      }

      .wide,
      .tall,
      .big{
        grid-column:span 1;
        grid-row:span 1;
      }
    }