.new-game-ios-page .v-hero-media img {
  width: min(100%, 42rem);
  max-height: 37rem;
  object-fit: contain;
}

.new-game-ios-page .v-hero-media img[src*="new-game-hero-character.png"] {
  width: min(92%, 38rem);
  margin-left: auto;
  transform: translateX(clamp(18px, 2.2vw, 38px));
}

.new-game-ios-page .v-hero-media img[src*="business-growth-hero-team.png"] {
  width: min(88%, 34rem);
  max-height: 37rem;
  margin-left: auto;
  transform: translateX(clamp(18px, 2vw, 34px));
}

.new-game-ios-page .v-hero-media img[src*="hire-artists-team.png"] {
  width: min(82%, 31rem);
  max-height: 37rem;
  margin-left: auto;
  transform: translateX(clamp(18px, 2vw, 34px));
}

.new-game-ios-page .v-hero-media img[src*="qa-tested-stamp.png"] {
  width: min(84%, 33rem);
  max-height: 33rem;
  margin-left: auto;
  transform: translateX(clamp(18px, 2vw, 34px));
}

/* This render's artwork sits close to the left edge of its canvas (unlike
   the other hero renders), so at mid-width viewports it overlaps the
   "Игровые разработчики" heading. Shrink it and pin it to the right of
   its column so it clears the text. */
.new-game-ios-page .v-hero-media img[src*="hire-developers-hero-v2.png"] {
  width: min(78%, 33rem);
  margin-left: auto;
}

/* Wide screens have room to spare: push the image further right instead
   of keeping it shrunk, so it stays clear of the heading as it grows. */
@media (min-width: 1441px) {
  .new-game-ios-page .v-hero-media img[src*="hire-developers-hero-v2.png"] {
    transform: translateX(calc(72px + (100vw - 1440px) * 0.26));
  }
}

.new-game-ios-page .v-adv-top {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 5vw, 5.25rem);
}

.new-game-ios-page .v-adv-head {
  position: relative;
  z-index: 2;
}

.new-game-ios-page .v-adv-head h2 {
  max-width: 100%;
  font-size: clamp(2.5rem, 3vw, 3.25rem);
  line-height: .88;
}

.new-game-ios-page .v-adv-visual {
  min-width: 0;
  margin: 0;
  background: transparent;
}

.new-game-ios-page .v-adv-visual img {
  width: min(100%, 42rem);
  height: auto;
  margin-left: auto;
  object-fit: contain;
  object-position: center;
}

.new-game-ios-page .v-adv-visual img[src*="new-game-advantages-character.png"] {
  width: min(94%, 40rem);
  max-height: 32rem;
}

.new-game-ios-page .v-adv-visual img[src*="existing-game-advantages-character.png"] {
  width: min(84%, 34rem);
  max-height: 32rem;
}

.new-game-ios-page .v-adv-visual img[src*="feature-development-monitor.png"] {
  width: min(94%, 40rem);
  max-height: 31rem;
}

/* The growth page uses a tall chess-piece visual: keep it compact and
   centered inside its column so it cannot crowd the copy. */
.new-game-ios-page .v-adv-visual img[src*="business-growth-detail.png"] {
  width: min(50%, 21rem);
  margin-inline: auto;
}

.new-game-ios-page .v-adv-visual img[src*="business-growth-advantages-weapon.png"] {
  width: min(92%, 39rem);
  max-height: 29rem;
  margin-left: auto;
}

.new-game-ios-page .v-adv-visual img[src*="hire-developers-team.png"] {
  width: min(100%, 44rem);
  max-height: 31rem;
  margin-left: auto;
}

.new-game-ios-page .v-adv-visual img[src*="qa-scanner-detail.png"] {
  width: min(68%, 26rem);
  max-height: 30rem;
  margin-inline: auto;
}

.new-game-ios-page .v-adv-visual img[src*="ai-world-builder.png"] {
  width: min(100%, 44rem);
  max-height: 29rem;
  margin-left: auto;
}

.new-game-ios-page .v-hero-media img[src*="liveops-reward-chest.png"] {
  width: min(88%, 34rem);
  max-height: 35rem;
  margin-left: auto;
  transform: translateX(clamp(18px, 2vw, 34px));
}

.new-game-ios-page .v-adv-visual img[src*="liveops-event-calendar.png"] {
  width: min(72%, 29rem);
  max-height: 30rem;
  margin-inline: auto;
}

.new-game-ios-page .v-hero-media img[src*="updates-support-headset.png"] {
  width: min(82%, 32rem);
  max-height: 34rem;
  margin-left: auto;
  transform: translateX(clamp(18px, 2vw, 34px));
}

.new-game-ios-page .v-adv-visual img[src*="updates-download-icon.png"] {
  width: min(74%, 30rem);
  max-height: 30rem;
  margin-inline: auto;
}

/* The joystick render has almost no built-in padding, so scaled purely by
   width it towers over the section with no room above or below. Cap its
   height so it keeps normal breathing room, like the other visuals. */
.new-game-ios-page .v-adv-visual img[src*="feature-development-hero.png"] {
  max-height: 28rem;
}

.new-game-ios-page .v-stats {
  width: 100%;
  align-items: stretch;
}

.new-game-ios-page .v-stats > div {
  box-sizing: border-box;
  min-width: 0;
  min-height: 12rem;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(3.5rem, auto) minmax(2.75rem, auto);
  align-content: center;
  justify-content: stretch;
  justify-items: center;
  gap: clamp(1.25rem, 1.8vw, 1.75rem);
  overflow: hidden;
  text-align: center;
}

.new-game-ios-page .v-stats b {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: clamp(2.25rem, 3vw, 3rem);
  line-height: .92;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-align: center;
}

.new-game-ios-page .v-stats span {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 17ch;
  margin: 0 auto;
  font-size: clamp(.72rem, .82vw, .88rem);
  line-height: 1.18;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}

.new-game-ios-page .v-device-visual img {
  width: 100%;
  height: auto;
  max-height: 37rem;
  object-fit: contain;
}

.new-game-ios-page .v-stack-row > span:not(:first-child) {
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 760px) {
  .new-game-ios-page .v-hero-media {
    width: 100%;
    justify-content: center;
  }

  .new-game-ios-page .v-hero-media img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 23rem;
    margin-inline: auto !important;
    object-position: center;
    transform: none !important;
  }

  .new-game-ios-page .v-hero-media img[src*="new-game-hero-character.png"] {
    width: min(94%, 34rem);
    margin-inline: auto;
    transform: none;
  }

  .new-game-ios-page .v-hero-media img[src*="business-growth-hero-team.png"] {
    width: min(88%, 32rem);
    margin-inline: auto;
    transform: none;
  }

  .new-game-ios-page .v-adv-top {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .new-game-ios-page .v-stats > div {
    min-height: 9.5rem;
    padding: 1.1rem;
    grid-template-rows: minmax(2.75rem, auto) minmax(2.5rem, auto);
    gap: .9rem;
  }

  .new-game-ios-page .v-stats b {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
  }
}

@media (max-width: 620px) {
  .new-game-ios-page .v-adv-head h2 {
    font-size: clamp(25px, 7vw, 30px);
    text-wrap: balance;
  }
}

@media (max-width: 360px) {
  .new-game-ios-page .v-adv-head h2 {
    font-size: 23px;
  }
}