.gallery {
  --s: 150px; /* control the size */
  
  display: grid;
  gap: 10px; /* control the gap */
  grid: auto-flow var(--s)/repeat(3,var(--s));
  place-items: center;
  margin: calc(var(--s)/4);
}
.gallery > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.gallery > img:nth-child(odd) {
  border-radius: 50%;
  width: 141%;
}
.gallery > img:nth-child(even) {
  --_r: calc(var(--s)/1.414) at;
  --_g: calc(var(--s)/-2),#000 99%,#0000;
  --_m:
    radial-gradient(var(--_r) left 50% bottom var(--_g)),
    radial-gradient(var(--_r) left 50% top    var(--_g)),
    radial-gradient(var(--_r) top  50% right  var(--_g)),
    radial-gradient(var(--_r) top  50% left   var(--_g)),
    linear-gradient(#000 0 0);
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
}


.gallerybody {
  margin: 0;
  min-height: 600px;
  display: grid;
  place-content: center;
  background: #000000;
}