.gallery {
        display: grid;
        --g: 20px;
        width: 60%;
    }
    
    .gallery img {
        transition: .5s ease, z-index 0s .3s ease;
        grid-area: 1/1;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        cursor: pointer;
        z-index: 0;
        border: 3px solid;
        transform: translate(var(--_x,0),var(--_y,0));
        
    }
    .gallery img:hover {
        --_i: 1;
        z-index: 1;
        transition: transform .5s ease, clip-path .3s .4s ease, z-index 0s ease;
    }
    .gallery:hover img {
        transform: translate(0,0);
    }
    .gallery img:nth-child(1) {
        clip-path: polygon(0% 0%, 33.33% 0%, 33.33% 100%, 0% 100%);
        --_x: calc(-1*var(--g));
        --_y: calc(-1*var(--g));
    }       
    
    .gallery img:nth-child(2) {
        clip-path: polygon(33.33% 0%, 66.66% 0%, 66.66% 100%, 33.33% 100%);
    }
    
    .gallery img:nth-child(3) {
        clip-path: polygon(66.66% 0%, 100% 0%, 100% 100%, 66.66% 100%);
        --_x: var(--g);
        --_y: var(--g);
    }
    .gallery img:nth-child(1):hover,
    .gallery img:nth-child(2):hover,
    .gallery img:nth-child(3):hover {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    .gallery img.show {
        transform: translate(0,0);
    }
    .gallery img.active {
        --_i: 1;
        z-index: 1;
        transition: transform .5s ease, clip-path .3s .4s ease, z-index 0s ease;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    
/*@media (max-width: 480px) {*/
/*    .gallery {*/
/*      width: 80%;*/
/*    }*/
/*}*/
/*.section:not(.active) .gallery {*/
/*    --g: 500px;*/
/*    --s: 600px;*/
/*    display: grid;*/
/*    border-radius: 50%;*/
/*    transition: all .5s ease;*/
/*}*/

/*.section.active .gallery {*/
/*    --g: 20px;*/
/*    --s: 600px;*/
/*    display: grid;*/
/*    background-color: #c1c1c15e;*/
/*    border-radius: 50%;*/
/*    transition: all .5s ease; */
/*}*/
 

/*.gallery > img {*/
/*  grid-area: 1/1;*/
/*  width: 600px;*/
/*  aspect-ratio: 1;*/
/*  object-fit: cover;*/
/*   border-radius: 50%;*/
/*  transform: translate(var(--_x,0),var(--_y,0));*/
/*  cursor: pointer;*/
/*  filter: grayscale(1);*/
/*  z-index: 0;*/
/*  transition: .5s ease, z-index 0s .3s ease;*/
/*  border: 3px solid;*/
    
/*}*/

/*.gallery img:hover {*/
/*  --_i: 1;*/
/*  z-index: 1;*/
/*  filter: grayscale(0);*/
/*  transition: transform .5s ease, clip-path .3s .2s ease, z-index 0s ease;*/
/*}*/
/*.gallery:hover img {*/
/*  transform: translate(0,0);*/
/*}*/
/*.gallery > img:nth-child(1) {*/
/*  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))*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .section:not(.active) .gallery {*/
/*    --g: 500px;*/
/*    --s: 300px;*/
/*}*/

/*    .section.active .gallery {*/
/*        --g: 10px;*/
/*        --s: 300px;*/
/*    }*/
/*    .gallery > img {*/
/*      width: 300px;*/
/*    }*/
/*}*/