.gallery {
    --s: 200px; /* control the size */
    --g: 8px;   /* control the gap */
    
    display: grid;
    grid: auto-flow var(--s)/repeat(2,var(--s));
    gap: var(--g);
    
  }
  .gallery > img {
    width: 100%; 
    aspect-ratio: 1;
    cursor: pointer;
    filter: grayscale();
    z-index: 0;
    transition: .25s,z-index 0s .25s;
    
  }
  .gallery > img:hover {
    width: calc(200% + var(--g));
    filter: grayscale(0);
    z-index: 1;
    --_c: 50%;
    transition: .4s,z-index 0s;
  }
  .gallery > img:nth-child(1){
    clip-path: circle(var(--_c,55% at 70% 70%));
    place-self: start;
  }
  .gallery > img:nth-child(2){
    clip-path: circle(var(--_c,55% at 30% 70%));
    place-self: start end;
  }
  .gallery > img:nth-child(3){
    clip-path: circle(var(--_c,55% at 70% 30%));
    place-self: end start;
  }
  .gallery > img:nth-child(4){
    clip-path: circle(var(--_c,55% at 30% 30%));
    place-self: end;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #A8DBA8;
  }

  .logo{
    background-color: blueviolet;
}

footer{
    background-color: rgb(0, 0, 0);
    font-style: italic;
    font-weight: 10rem;
    color: whitesmoke;
    margin-top: 10px;
    font-family: sans-serif;
}

btn btn{
    color: blueviolet;
}