.wrapper{
    --_gap: .5rem;
    --_offset: 10%;
    --_offset-1: calc(var(--_offset) * 1);
    --_offset-2: calc(var(--_offset) * 2);
    --_offset-3: calc(var(--_offset) * 3);
    --_offset-7: calc(var(--_offset) * 7);
    --_offset-8: calc(var(--_offset) * 8);
    --_offset-9: calc(var(--_offset) * 9);
      
    width: calc(100% - 4rem);
    max-width: 800px;
    margin: 2rem auto;
    color: white;
    font-family: system-ui;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--_gap);
    pointer-events: none;
    transform-style: preserve-3d;
  }
  .wrapper > div{
    position: relative;
    pointer-events: auto;
    aspect-ratio: 1;
    transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
    clip-path: polygon(var(--_clip-path));
    transform: translate3d(0,0,0);
  }
  .wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .wrapper > div:nth-child(n+4){
   margin-top: calc(var(--_offset-3) * -1 + var(--_gap));
  }
  /* define clip-path custom properties */
  .wrapper > div:nth-child(1){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%;}
  .wrapper > div:nth-child(2){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9);}
  .wrapper > div:nth-child(3){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8);}
    
  .wrapper > div:nth-child(4){ --_clip-path: 0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7);}
  .wrapper > div:nth-child(5){ --_clip-path: 0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8);}
  .wrapper > div:nth-child(6){ --_clip-path: 0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9);}
  
  .wrapper > div:nth-child(7){ --_clip-path: 0 0%, 100% var(--_offset-1), 100% 100%, 0 100%;}
  .wrapper > div:nth-child(8){ --_clip-path: 0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%;}
  .wrapper > div:nth-child(9){ --_clip-path: 0 var(--_offset-2), 100% var(--_offset-3), 100% 100%, 0 100%;}
  
  
  .wrapper > div:hover{
    transition: scale 500ms ease-in-out, filter 500ms ease-in-out, clip-path 500ms ease-in-out 500ms;
    scale: 1.3;
    --_clip-path: 0 0, 100% 0, 100% 100%, 0 100%;
    z-index: 100;
    opacity: 1;
  }
  
  .wrapper:has(:hover) > div:not(:hover){
    filter: grayscale(1) blur(3px);
    opacity: .5;
    scale: 0.9;
  }
  .wrapper > div:not(:hover) {
    /*animation: zIndexHack 1000ms;*/
  
  }
  
  @keyframes zIndexHack {
    0%, 100% { z-index: 100; }
  }
  
  /* general styling */
  :root{
    --clr-bg: #222;
    --clr-txt: #F5F5F5;
    --clr-primary: #F5F5F5;
    --clr-secondary: #38BDF8;
    --clr-button: #0369A1;
  }