/* Правило дня: открытка каждому. Макет: pczvi (1440) и DTm14 (390).

   Фон секции - сплошной малиновый (--accent), поэтому текст и кикер на
   нём светлые - свои токены --on-accent* (не --text/--text-2: те для
   светлого фона страницы, здесь фон сам тёмный). Кикер/заголовок/лид
   берут размер из общих .hw-kicker/.hw-h2/.hw-lead, здесь только центр,
   свои цвета и то, что в макете отличается от общего ритма. */

.vl-rule {
  /* В макете вертикальный паддинг секции 96px, а не общие 116 из
     .hw-sec (prazdnik.css) - у каждой секции Валентина свой ритм,
     общий токен здесь не совпадает, трогать чужой файл нельзя. */
  padding-block: 96px;
  background: var(--accent);
  text-align: center;
}

.vl-rule__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vl-rule__kicker {
  color: var(--on-accent-kicker);
}

.vl-rule__phrase {
  max-width: 940px;
  margin: 26px 0 0;
  color: var(--on-accent);
  text-align: center;
  /* Размер и межстрочный в макете свои, не общие 52/1.10/-1.8. */
  font-size: 56px;
  line-height: 62px;   /* 56 x 1.1 = 61.6, в макете строка целая - 62 */
  letter-spacing: -2px;
}

.vl-rule__lead {
  max-width: 820px;
  margin: 26px 0 0;
  color: var(--on-accent-lead);
  text-align: center;
  /* В макете межстрочный 1.85, не общий 1.75. */
  font-size: 17px;
  line-height: 31px;   /* 17 x 1.85 = 31.45, в макете строка целая - 31 */
}

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

  /* На телефоне (DTm14) весь блок остаётся по центру - так же, как на
     десктопе, в отличие от большинства других секций страницы, где
     мобильная версия уходит влево. Здесь ничего не меняем в
     .vl-rule__wrap, он центрирует и тут. */

  .vl-rule__phrase {
    margin-top: 26px;
    font-size: 27px;
    line-height: 30px;   /* 27 x 1.1 = 29.7, в макете строка целая - 30 */
    letter-spacing: -.8px;
  }

  .vl-rule__lead {
    margin-top: 26px;
    font-size: 15px;
    line-height: 28px;   /* 15 x 1.85 = 27.75, в макете строка целая - 28 */
  }
}