/* Раздел «Герои»: у каждого класса свой фон автора — Лучница стреляет в кабана в ночном лесу (2026-09-15), Орк с
   факелом и мечом у входа в пещеру (2026-09-24), Маг стихии (2026-09-29),
   Тень ночи с кинжалом у ствола над лагерем Орды (2026-10-04). Затемнение то же, что у главной (page.css), картинка — своя. */

.page--heroes-archer {
  background-image:
    linear-gradient(to bottom, rgba(6, 5, 8, 0.6) 0, rgba(6, 5, 8, 0) 220px),
    linear-gradient(to bottom, rgba(11, 10, 16, 0) 55%, var(--color-bg) 100%),
    url('../../assets/img/background-heroes-archer.jpg');
}

.page--heroes-warrior {
  background-image:
    linear-gradient(to bottom, rgba(6, 5, 8, 0.6) 0, rgba(6, 5, 8, 0) 220px),
    linear-gradient(to bottom, rgba(11, 10, 16, 0) 55%, var(--color-bg) 100%),
    url('../../assets/img/background-heroes-warrior.jpg');
}

.page--heroes-mage {
  background-image:
    linear-gradient(to bottom, rgba(6, 5, 8, 0.6) 0, rgba(6, 5, 8, 0) 220px),
    linear-gradient(to bottom, rgba(11, 10, 16, 0) 55%, var(--color-bg) 100%),
    url('../../assets/img/background-heroes-mage.jpg');
}

.page--heroes-rogue {
  background-image:
    linear-gradient(to bottom, rgba(6, 5, 8, 0.6) 0, rgba(6, 5, 8, 0) 220px),
    linear-gradient(to bottom, rgba(11, 10, 16, 0) 55%, var(--color-bg) 100%),
    url('../../assets/img/background-heroes-rogue.jpg');
}

.page--heroes-druid {
  background-image:
    linear-gradient(to bottom, rgba(6, 5, 8, 0.6) 0, rgba(6, 5, 8, 0) 220px),
    linear-gradient(to bottom, rgba(11, 10, 16, 0) 55%, var(--color-bg) 100%),
    url('../../assets/img/background-heroes-druid.jpg');
}

/* Два столбца по краям, герой на картине между ними: слева — класс и «Характеристики», справа — «Умения». */
.heroes__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Левая колонка: блок класса и под ним «Характеристики» (2026-09-28) — ширина блока, не сжимается. */
.heroes__column {
  flex: none;
  max-width: 100%;
}

/* Два блока по 520 не встают в ряд — друг под другом. */
@media (max-width: 1100px) {
  .heroes__main {
    flex-direction: column;
    align-items: stretch;
  }

  .heroes__main .info-card {
    width: auto;
  }
}