.gallery {
	--g:8px;
	/* the gap */
  --s:500px;
	/* the size */
  display:grid;
	border-radius:50%;
}
.gallery > img {
	grid-area:1/1;
	width:var(--s);
	aspect-ratio:1;
	object-fit:cover;
	border-radius:50%;
	transform:translate(var(--_x,0),var(--_y,0));
	cursor:pointer;
	font-size:0;
	z-index:0;
	transition:0.3s,z-index 0s 0.3s;
}
.gallery img:hover {
	font-size:var(--s);
	z-index:1;
	transition:transform 0.2s,font-size 0.3s 0.2s,z-index 0s;
}
.gallery:hover img {
	transform:translate(0,0);
}
.gallery > img:nth-child(1) {
	clip-path:polygon(
    50% 50%,0.5em 1.2em,0 1em,0 0,100% 0,100% 1em,calc(100% - 0.5em) 1.2em
  );
	--_y:calc(-1 * var(--g));
}
.gallery > img:nth-child(2) {
	clip-path:polygon(
    50% 50%,calc(100% - 1.2em) 0.5em,calc(100% - 1em) 0,100% 0,100% 100%,calc(100% - 1em) 100%,calc(100% - 1.2em) calc(100% - 0.5em)
  );
	--_x:var(--g);
}
.gallery > img:nth-child(3) {
	clip-path:polygon(
    50% 50%,calc(100% - 0.5em) calc(100% - 1.2em),100% calc(100% - 1.2em),100% 100%,0 100%,0 calc(100% - 1em),0.5em calc(100% - 1.2em)
  );
	--_y:var(--g);
}
.gallery > img:nth-child(4) {
	clip-path:polygon(
    50% 50%,1.2em 0.5em,1em 0,0 0,0 100%,1em 100%,1.2em calc(100% - 0.5em)
  );
	--_x:calc(-1 * var(--g));
}
body {
	margin:0;
	min-height:100vh;
	display:grid;
	place-content:center;
	background:#005eb8;
}