﻿
.siteHeading {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

    .siteHeading::after {
        width: 120px;
        /* padding-bottom: 5px; */
        height: 3px;
        background-color: #cadbf6;
        content: '';
        position: relative;
        /* left: 0; */
        /* bottom: 0; */
        margin: 0 auto;
        /* right: 0; */
        top: 5px;
    }

.gallery {
    --g: 8px; /* the gap */
    --s: 400px; /* the size */

    display: grid;
    border-radius: 50%;
}

    .gallery > img {
        grid-area: 1/1;
        width: 325px;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 50%;
        transform: translate(var(--_x,0),var(--_y,0));
        cursor: pointer;
        z-index: 0;
        transition: .3s, z-index 0s .3s;
    }

    .gallery img:hover {
        --_i: 1;
        z-index: 1;
        transition: transform .2s, clip-path .3s .2s, z-index 0s;
    }

    .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))
    }
