.gallery {
  --g: 6px; /* the gap */
  
  display: grid;
  margin: 0 auto;
  width: 500px; /* the size */
  aspect-ratio: 1;
  grid: auto-flow 1fr/repeat(3,1fr);
  gap: var(--g);
  margin-bottom: -30px;
  margin-top: -40px;
}
@media (max-width: 400px) {
  .gallery {
    width: 380px
  }
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale();
  cursor: pointer;
  transition: .45s
}
.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;
}