/* Не про романтику: три довода. Макет: wKZnT (1440) и CwQ2l (390).

   Заголовок секции здесь мельче общего .hw-h2 (44px, не 52) - свой
   класс, а не общий, который был бы на 8px крупнее макета. Карточка
   довода (черта + заголовок + текст) - тот же приём, что у hw-rule__card
   Хэллоуина, своя копия: оттуда нельзя подключить класс, у Хэллоуина
   это часть другого блока (правила вечера), а не отдельного файла. */

.vl-why {
  /* В макете вертикальный паддинг секции 100px, а не общие 116. */
  padding-block: 100px;
}

.vl-why__in {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.vl-why__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vl-why__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 44px;
  line-height: 50px;   /* 44 x 1.14 = 50.16 */
  letter-spacing: -1.5px;
  color: var(--text);
}

.vl-why__list {
  display: flex;
  gap: 20px;
}

.vl-why__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vl-why__bar {
  width: 32px;
  height: 3px;
  background: var(--accent);
}

.vl-why__card-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 25px;   /* в макете явно 1.3: 19 x 1.3 = 24.7 */
  color: var(--text);
}

.vl-why__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;   /* в макете явно 1.75: 15 x 1.75 = 26.25 */
  color: var(--text-2);
}

@media (max-width: 860px) {
  /* Десктопные 100px выше не внутри медиа-запроса - без явного сброса
     протекли бы и на телефон, а в макете (CwQ2l) здесь общие 52px
     из .hw-sec. Та же утечка, что чинили в "Правиле дня". */
  .vl-why { padding-block: 52px; }

  .vl-why__in { gap: 36px; }

  .vl-why__h2 {
    font-size: 27px;
    line-height: 31px;   /* 27 x 1.14 = 30.78 */
    letter-spacing: -.8px;
  }

  .vl-why__list {
    flex-direction: column;
    gap: 14px;
  }

  .vl-why__card-title { font-size: 18px; line-height: 23px; }   /* 18 x 1.3 = 23.4 */
  .vl-why__card-text { font-size: 14px; line-height: 25px; }    /* 14 x 1.75 = 24.5, в макете строка целая - 25 */
}