.rank-emblem {
  --badge-x: 547px;
  --badge-y: 105px;
  --badge-glow: rgba(97, 242, 15, .35);
  isolation: auto;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background-color: #101014;
  background-image: url("assets/ranks/apex-rank-lineup-large.png");
  background-repeat: no-repeat;
  background-size: 1024px 538px;
  background-position: calc(50% - var(--badge-x)) calc(50% - var(--badge-y));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .42), 0 0 22px var(--badge-glow);
  filter: drop-shadow(0 9px 14px rgba(0, 0, 0, .42));
}

.rank-emblem::before,
.rank-emblem::after,
.rank-emblem > span {
  display: none;
}

.rank-emblem--gold {
  --badge-x: 547px;
  --badge-y: 105px;
  --badge-glow: rgba(255, 212, 94, .34);
}

.rank-emblem--platinum {
  --badge-x: 640px;
  --badge-y: 230px;
  --badge-glow: rgba(88, 228, 207, .34);
}

.rank-emblem--diamond {
  --badge-x: 749px;
  --badge-y: 150px;
  --badge-glow: rgba(67, 191, 255, .38);
}

.rank-emblem--master {
  --badge-x: 856px;
  --badge-y: 285px;
  --badge-glow: rgba(155, 92, 255, .42);
}

.rank-emblem--predator {
  --badge-x: 960px;
  --badge-y: 365px;
  --badge-glow: rgba(255, 51, 95, .44);
}

.rank-emblem--large {
  border-radius: 24px;
}

.rank-emblem--profile {
  border-radius: 28px;
}

@media (max-width: 640px) {
  .rank-emblem {
    background-size: 1024px 538px;
  }
}