@layer layout {
  .rankings {
    padding: unset;
    margin-block: 6rem 0;

    text-align: center;
    
    list-style-type: none;
    
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 1.5rem;
      block-size: 100%;
    
      border-block-end: unset;
    }

    li {
      border: 1px solid oklch(from var(--color-neutral) calc(l + 0.5) c h);

      aspect-ratio: 16 / 9;
      
      transition: border-color .1s linear;
      
      &:not(:has(a)) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 1.5rem;
      }
      
      &:has(a):hover, &:focus-within {
        border-color: oklch(from var(--color-neutral) calc(l + 0.3) c h);
      }
    }
    
    h2 {
      margin: unset;
    }
  }
}