.hero-preview.vanguard,
.hero-preview.ranger,
.hero-preview.mystic {
  font-size: 0;
  background-image: url("./assets/heroes-atlas.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  box-shadow: inset 0 0 0 1px #ffffff24;
}

.hero-preview.vanguard {
  background-color: #704a38;
  background-position: left center;
}

.hero-preview.ranger {
  background-color: #2f6252;
  background-position: center center;
}

.hero-preview.mystic {
  background-color: #544269;
  background-position: right center;
}