/* * {
    box-sizing: border-box;
  }
  
  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
  } */
  
  .results {
    display: flex;
    width: calc(100%);
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  
  .result {
    padding: 0;
  }
  
  .awards {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.2s ease;
  }
  
  .results:is(:hover, :focus-within) .awards {
    opacity: calc(0.1 + (var(--active-lerp, 0) * 0.9));
    filter: grayscale(calc(1 - var(--active-lerp, 0)));
    /* background-image: linear-gradient(to bottom right, rgba(255,0,0,0) 50%, rgba(255,0,0,1) ); */
    mask-image: linear-gradient(black 100%, transparent);
    cursor: pointer;
  }
  
  .results {
    /* border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
    border-radius: 8px;
    border: 2px solid black; */
    background-image: linear-gradient(to bottom right, rgba(255,0,0,0), rgba(255,0,0,1));
    /* border-width: 5px;
    border-style: solid; */
    
  }

  :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;
  }
  
  .result {
    flex: calc(0.1 + (var(--active-lerp, 0) * 1));
    transition: flex 0.2s ease;
    
  }
  
  .result:is(:hover, :focus-within) {
    --active-lerp: var(--lerp-0);
    z-index: 7;
  }
  .result:has( + .result:is(:hover, :focus-within)),
  .result:is(:hover, :focus-within) + .result {
    --active-lerp: var(--lerp-1);
    z-index: 6;
  }
  .result:has( + .result + .result:is(:hover, :focus-within)),
  .result:is(:hover, :focus-within) + .result + .result {
    --active-lerp: var(--lerp-2);
    z-index: 5;
  }
  .result:has( + .result + .result + .result:is(:hover, :focus-within)),
  .result:is(:hover, :focus-within) + .result + .result + .result {
    --active-lerp: var(--lerp-3);
    z-index: 4;
  }
  .result:has( + .result + .result + .result + .result:is(:hover, :focus-within)),
  .result:is(:hover, :focus-within) + .result + .result + .result + .result {
    --active-lerp: var(--lerp-4);
    z-index: 3;
  }
  .result:has( + .result + .result + .result + .result + .result:is(:hover, :focus-within)),
  .result:is(:hover, :focus-within) + .result + .result + .result + .result + .result {
    --active-lerp: var(--lerp-5);
    z-index: 2;
  }
  .result:has( + .result + .result + .result + .result + .result + .result:is(:hover, :focus-within)),
  .result:is(:hover, :focus-within) + .result + .result + .result + .result + .result + .result {
    --active-lerp: var(--lerp-6);
    z-index: 1;
  }