* {
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
  }
  
  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
  }
  
  ul {
    display: flex;
    width: calc(80% - 2rem);
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  
  li {
    padding: 0;
  }
  
  img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
  }
  
  ul:is(:hover, :focus-within) img {
    opacity: calc(0.1 + (var(--active-lerp, 0) * 0.9));
    filter: grayscale(calc(1 - var(--active-lerp, 0)));
  }
  
  :root {
    --lerp-0: 1;
    --lerp-1: 0.5787037;
    --lerp-2: 0.2962963;
    --lerp-3: 0.125;
    --lerp-4: 0.037037;
    --lerp-5: 0.0046296;
    --lerp-6: 0;
  }
  
  a {
    outline-offset: 4px;
  }
  
  li {
    flex: calc(0.1 + (var(--active-lerp, 0) * 1));
    transition: flex 0.3s ease-in-out;
  }
  
  li:is(:hover, :focus-within) {
    --active-lerp: var(--lerp-0);
    z-index: 7;
  }
  li:has( + li:is(:hover, :focus-within)),
  li:is(:hover, :focus-within) + li {
    --active-lerp: var(--lerp-1);
    z-index: 6;
  }
  li:has( + li + li:is(:hover, :focus-within)),
  li:is(:hover, :focus-within) + li + li {
    --active-lerp: var(--lerp-2);
    z-index: 5;
  }
  li:has( + li + li + li:is(:hover, :focus-within)),
  li:is(:hover, :focus-within) + li + li + li {
    --active-lerp: var(--lerp-3);
    z-index: 4;
  }
  li:has( + li + li + li + li:is(:hover, :focus-within)),
  li:is(:hover, :focus-within) + li + li + li + li {
    --active-lerp: var(--lerp-4);
    z-index: 3;
  }
  li:has( + li + li + li + li + li:is(:hover, :focus-within)),
  li:is(:hover, :focus-within) + li + li + li + li + li {
    --active-lerp: var(--lerp-5);
    z-index: 2;
  }
  li:has( + li + li + li + li + li + li:is(:hover, :focus-within)),
  li:is(:hover, :focus-within) + li + li + li + li + li + li {
    --active-lerp: var(--lerp-6);
    z-index: 1;
  }