.gallery{--g:32px;--s:400px;border-radius:50%;display:grid}.gallery>img{aspect-ratio:1;object-fit:cover;width:400px;transform:translate(var(--_x,0),var(--_y,0));cursor:pointer;z-index:0;border-radius:50%;grid-area:1/1;transition:all .3s,z-index 0s .3s}.gallery img:hover{--_i:1;z-index:1;transition:transform .2s,clip-path .3s .2s,z-index}.gallery:hover img{transform:translate(0)}.gallery>img:first-child{clip-path:polygon(50% 50%,calc(50%*var(--_i,0))calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0))calc(120%*var(--_i,0)));--_y:calc(-1*var(--g))}.gallery>img:nth-child(2){clip-path:polygon(50% 50%,calc(100% - 120%*var(--_i,0))calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0))0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0))100%,calc(100% - 120%*var(--_i,0))calc(100% - 50%*var(--_i,0)));--_x:var(--g)}.gallery>img:nth-child(3){clip-path:polygon(50% 50%,calc(100% - 50%*var(--_i,0))calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0))calc(100% - 120%*var(--_i,0)));--_y:var(--g)}.gallery>img:nth-child(4){clip-path:polygon(50% 50%,calc(120%*var(--_i,0))calc(50%*var(--_i,0)),calc(100%*var(--_i,0))0,0 0,0 100%,calc(100%*var(--_i,0))100%,calc(120%*var(--_i,0))calc(100% - 50%*var(--_i,0)));--_x:calc(-1*var(--g))}.container{background:0 0;width:360px;height:640px;margin-top:150px;transition:all .5s;position:relative;transform:rotate(-30deg)skew(25deg)scale(.8)}.container img{width:100%;transition:all .5s;position:absolute}.container:hover img:nth-child(4){opacity:1;transform:translate(160px,-160px)}.container:hover img:nth-child(3){opacity:.8;transform:translate(120px,-120px)}.container:hover img:nth-child(2){opacity:.6;transform:translate(80px,-80px)}.container:hover img:first-child{opacity:.4;transform:translate(40px,-40px)}