.rankings-hero {
  background:
    linear-gradient(90deg, rgba(5, 13, 9, .97) 0%, rgba(5, 13, 9, .86) 44%, rgba(5, 13, 9, .66) 72%, rgba(5, 13, 9, .82) 100%),
    linear-gradient(180deg, rgba(7, 16, 12, .08), rgba(7, 16, 12, .7)),
    url("assets/nexo-zambia-apex-hero-full.png") center / cover no-repeat;
}

.rank-emblem {
  --badge-left: -112px;
  --badge-top: -134px;
  background-color: #17151d;
  background-image: url("assets/ranks/apex-rank-lineup-compact.png");
  background-repeat: no-repeat;
  background-size: 474px 237px;
  background-position: var(--badge-left) var(--badge-top);
}

.rank-emblem--gold {
  --badge-left: -336px;
  --badge-top: -59px;
}

.rank-emblem--platinum {
  --badge-left: -112px;
  --badge-top: -134px;
}

.rank-emblem--diamond {
  --badge-left: -198px;
  --badge-top: -134px;
}

.rank-emblem--master {
  --badge-left: -284px;
  --badge-top: -134px;
}

.rank-emblem--predator {
  --badge-left: -370px;
  --badge-top: -134px;
}

.rank-emblem--large {
  background-position: calc(var(--badge-left) + 13px) calc(var(--badge-top) + 14px);
}

.rank-emblem--profile {
  background-position: calc(var(--badge-left) + 19px) calc(var(--badge-top) + 20px);
}

@media (max-width: 640px) {
  .rank-emblem--large {
    background-position: calc(var(--badge-left) + 4px) calc(var(--badge-top) + 5px);
  }
}