.hero--factions {
  position: relative;
}

.hero__inner {
  display: grid;
  gap: var(--space-16);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.hero__visual {
  max-width: 460px;
  margin-inline: auto;
}

.hero-image-wrapper {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-strong);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-heading--center {
  text-align: center;
}

.section-intro {
  margin-left: auto;
  margin-right: auto;
}

.factions-grid {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .factions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faction-card--featured {
  grid-column: 1 / -1;
}

.faction-featured-layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .faction-featured-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }
}

.faction-figure {
  max-width: 420px;
  margin-inline: auto;
}

.faction-image {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.faction-lore-panel {
  padding: var(--space-8);
}

.faction-diplomacy-panel {
  padding: var(--space-8);
}

.faction-heroes-grid {
  margin-top: var(--space-8);
}

.faction-heroes-cta {
  margin-top: var(--space-12);
}

.faction-mechanics-layout {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 992px) {
  .faction-mechanics-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  }
}

.faction-mechanics-figure {
  max-width: 420px;
  margin-inline: auto;
}

.faction-mechanics-image {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.faction-mechanics-content {
  display: grid;
  gap: var(--space-8);
}

.faction-mechanics-card {
  padding: var(--space-8);
}

.faction-strategy-grid {
  margin-top: var(--space-8);
}

.faction-strategy-footer {
  margin-top: var(--space-12);
}

.factions-next-steps {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8);
}

@media (min-width: 900px) {
  .factions-next-steps {
    grid-template-columns: 2fr 1.3fr;
    align-items: center;
  }
}

.factions-next-steps-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .factions-next-steps-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.faction-card ul,
.faction-lore-panel ul,
.faction-diplomacy-panel ul,
.faction-mechanics-card ul,
.faction-strategy-card ul {
  padding-left: 1.1rem;
}

.faction-card li + li,
.faction-lore-panel li + li,
.faction-diplomacy-panel li + li,
.faction-mechanics-card li + li,
.faction-strategy-card li + li {
  margin-top: var(--space-2);
}