.leaderboards {
  --background: var(--background-color);
  color: contrast-color(var(--background));
  margin-block: 0 var(--section-margin);
  padding-block-start: var(--section-margin);

  background-image:
    radial-gradient(ellipse farthest-side at top,
      hsl(from var(--key-color) h calc(s - 20) calc(l + 10) / 0.65),
      transparent 75%
    ),
    linear-gradient(to bottom,
      transparent 5px,
      var(--key-color) 5px,
      var(--key-color) 6px,
      transparent 6px
    ),
    var(--leaderboards-background, none);
  
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto, auto, contain;

  border-block-start: 2px solid white;
}

.leaderboards .contents {
  display: flex;
  justify-content: center;
  gap: var(--gap);
}

.leaderboards-squad {
  flex-basis: 12.5rem;
  filter: drop-shadow(0 0 50px var(--tier-color));

  img {
    filter: drop-shadow(0 0 5px var(--tier-color));
  }
}

.leaderboards-image {
  width: min(100%, 12.5rem);
}

.leaderboards-placement {
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--tier-color);
  width: fit-content;
  margin-inline: auto;
}

.leaderboards-name {
  font-size: clamp(1.000rem, calc(0.773rem + 0.606vw), 1.500rem);
  font-weight: 700;
  filter: drop-shadow(0 0 10px var(--tier-color));
  text-align: center;
}

.leaderboards-squad:nth-child(1) {
  --tier-color: var(--gold-border-color);
}

.leaderboards-squad:nth-child(2) {
  --tier-color: var(--silver-border-color);
}

.leaderboards-squad:nth-child(3) {
  --tier-color: var(--bronze-border-color);
}

.leaderboards-points::after {
  content: ' pts';
  text-transform: uppercase;
  font-size: 0.75em;
  text-align: center;
}

@media (width <= 600px) {
  /* .leaderboards-name {
    max-width: 9ch;
    margin-inline: auto;
    margin-block: 0.2em;
  }
  .leaderboards-points::after {
    display: block;
    margin-block-start: 0.25em;
  } */
  .leaderboards .contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .leaderboards-squad:nth-child(1) {
    grid-column: 1/ -1;
  }
}