#logo-sticky{
  display: none;
}

#logo-sticky.sticky{
  display: block;
}

p, h2, a,h4, .section-subtitle {
  font-family: 'SF Pro';
}

/* Marquee styles */
.marquee {
    --gap: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    height: 150px;
    justify-content: space-around;
    gap: var(--gap);
    animation: scroll 10s linear infinite;
}

@media (max-width: 768px) {
    .marquee__content {
        height: 150%;
        flex-shrink: 0;
        display: flex;
        height: 50px;
        justify-content: space-around;
        gap: var(--gap);
        animation: scroll 10s linear infinite;
    }
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.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;
  }

  
  @keyframes zIndexHack {
    0%, 100% { z-index: 100; }
  }
  /* none of this CSS is relevant to the wave animation */
  :root{
    --clr-bg: #222;
    --clr-txt: #F5F5F5;
    --clr-primary: #F5F5F5;
    --clr-secondary: #38BDF8;
    --clr-button: #0369A1;
  }
  html{
    background-color: var(--clr-bg);
    font-family: system-ui;
    color: var(--clr-txt);
  }
  
 h1{
    font-size: 1.2rem;
    font-weight: 500;
    margin-block-end: 1rem;
    text-align: center;
  
  }
  code{
    color: var(--clr-secondary);
    border: 1px solid rgba(from var(--clr-secondary) r g b / .25);
    padding-inline: .25rem;
    border-radius: 5px;
  }