.heraldic-emblem {
  display: block;
  width: 72%;
  height: 72%;
  background: var(--emblem-color, #f4ebd2);
  -webkit-mask: var(--emblem-image, url("/assets/icons/emblems/eagle.svg")) center / contain no-repeat;
  mask: var(--emblem-image, url("/assets/icons/emblems/eagle.svg")) center / contain no-repeat;
}

.heraldic-pennant {
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
  padding-bottom: 9px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 79%, 0 100%);
  background: linear-gradient(125deg, var(--player-color), color-mix(in srgb, var(--player-color) 42%, black) 88%);
}