.gallery {
    --g: 6px; /* the gap */
    
    display: grid;
    width: 520px; /* the size */
    aspect-ratio: 1;
    grid: auto-flow 1fr/repeat(3,1fr);
    gap: var(--g);
  }
  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale();
    cursor: pointer;
    transition: .5s
  }
  .gallery img:hover {
    filter: grayscale(0);
  }
  .gallery img:nth-child(2) {
    grid-area: 1/2/span 2/span 2;
    clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4))
  }
  .gallery img:nth-child(3) {
    grid-area: 2/1/span 2/span 2;
    clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
  }