.value-prop {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 631px;
  overflow: hidden;
  background: var(--color-solutions-bg);
}

.value-prop__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--bleed-width);
  transform: translateX(-50%);
  z-index: 0;
}

.value-prop__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Сводит верх/низ фото к цвету фона секции — иначе жёсткий обрез
   картинки на стыке с соседними блоками (159:3154 в Figma). */
.value-prop__media::after {
  --side-fade: transparent; /* боковой фейд не нужен, пока фото не шире экрана (--bleed-width ещё не кэпает) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--side-fade), transparent 16%, transparent 84%, var(--side-fade)),
    linear-gradient(to bottom, rgba(245, 245, 248, 0) 86.05%, var(--color-solutions-bg) 100%),
    linear-gradient(to bottom, var(--color-solutions-bg) 0%, rgba(245, 245, 248, 0.76) 14.67%, rgba(245, 245, 248, 0) 27.3%);
}

/* Число 1700px = значение --bleed-width. В media query нельзя подставить var(),
   поэтому хардкод — если --bleed-width когда-нибудь изменится, поменять и тут. */
@media (min-width: 1700px) {
  .value-prop__media::after {
    --side-fade: var(--color-page-bg);
  }
}

.value-prop__content {
  position: relative;
  z-index: 1;
  /* width+margin-inline:auto вместо padding-left — центрированная колонка
     --content-width вместо «прибитого» к левому краю экрана отступа
     (система ширин — в tokens.css). max-width на heading/text
     ниже остаётся: они у́же content-width, определяют реальные переносы
     строк, эта ширина — просто внешняя граница колонки.
     Блок прибит к низу секции (align-items: flex-end), а не центрирован
     по вертикали: отступ до плашек «6 шагов работы» (margin-bottom) в
     макете фиксированный (65px до карточек + 125px, на которые фото
     заходит под них, см. margin-top: -125px в process-steps.css) и не
     должен зависеть от того, насколько высоким браузер посчитает сам
     текстовый блок. */
  width: min(var(--content-width), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  padding: 96px 0 0;
  margin-bottom: 190px;
}

.value-prop__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 15px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

/* Сам градиент — общий класс .heading-gradient (heading-gradient.css),
   тут только вёрстка макета этого конкретного заголовка + угол-модификатор. */
.value-prop__heading {
  --heading-gradient-angle: 101deg;
  max-width: 656px;
  margin: 0 0 20px;
  font-size: var(--fs-value-prop-heading);
  line-height: var(--lh-value-prop-heading);
}

.value-prop__heading-lead {
  font-weight: var(--fw-medium);
  color: var(--color-value-prop-muted);
}

.value-prop__heading-break {
  display: none;
}

.value-prop__text {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 500px;
}

.value-prop__text .icon--engineering-support {
  flex-shrink: 0;
}

.value-prop__text p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}

/*
  Мобильная адаптация (600px, база
  390px). Уточнено повторной сверкой с Figma (bug-triage, узлы 212:5255/
  212:5256 «hero-equipment-red-line-v2») — предыдущий комментарий здесь был
  неверным: в мобильном макете фото ЕСТЬ, это полноценный кадр оборудования
  с красной лентой (другой кадр, чем у декстопного value-prop-bg.webp), а не
  тонкая декоративная полоска. Фото — самый нижний слой, частично перекрыт
  заголовком сверху (верх кадра светлый/студийный — текст поверх читается),
  снизу заходит на ~75px под первую плашку «6 шагов работы» (скрыт под её
  непрозрачным фоном, см. margin-top в process-steps.css). Блок
  `.value-prop__text` по-прежнему скрыт на мобильном (макет его не содержит).
*/
@media (max-width: 599.98px) {
  .value-prop {
    position: relative;
    align-items: flex-start;
    min-height: min(597px, calc(597 / 390 * 100vw));
    overflow: hidden;
    padding: min(96px, calc(96 / 390 * 100vw)) 0 0;
  }

  .value-prop__media {
    display: block;
    position: absolute;
    top: min(200px, calc(200 / 390 * 100vw));
    left: 0;
    width: 100%;
    max-width: none;
    height: min(397px, calc(397 / 390 * 100vw));
    transform: none;
    z-index: 0;
  }

  .value-prop__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .value-prop__content {
    position: relative;
    z-index: 1;
    width: auto;
    margin: 0;
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  .value-prop__eyebrow {
    font-size: min(12px, calc(12 / 390 * 100vw));
  }

  .value-prop__heading {
    max-width: min(330px, calc(330 / 390 * 100vw));
    font-size: min(20px, calc(20 / 390 * 100vw));
    line-height: min(36px, calc(36 / 390 * 100vw));
    --heading-gradient-angle: 98.3deg;
  }

  .value-prop__heading-break {
    display: inline;
  }

  .value-prop__text {
    display: none;
  }
}