/* Пасха: "Двенадцать яиц". Макет: lq7Gc (1440) и VgDhx (390).

   Шапка - одна колонка (в отличие от "Правил", где абзац был сбоку).
   Карточки заданий - сетка на 4 колонки на десктопе и 2 на телефоне:
   решётка CSS Grid сама переносит лишние карточки на новую строку при
   любом их числе, поэтому "12" в тексте заголовка - это просьба
   заказчицы, а не то, на чём держится раскладка. */

/* Вертикальный отступ секции в макете - 110px на десктопе (на телефоне
   совпадает с общими 52px, отдельно не переопределяем), данные lq7Gc. */
@media (min-width: 861px) {
  .ea-eggs { padding-block: 110px; }
}

.ea-eggs__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Зазор между шапкой и сеткой в макете - 44px на обеих ширинах
     (lq7Gc/VgDhx), не общие 46/24. */
  margin-bottom: 44px;
}

/* Кикер этого блока - фирменный маджента, как и у "Правил". */
.ea-eggs__kicker { color: var(--magenta-text); }

@media (max-width: 860px) {
  /* Заголовок на телефоне в этом блоке нарисован 27px, не общие 28
     (--m-h2) - проверено по дампу VgDhx, тот же размер, что и в "Правилах". */
  .ea-eggs__title {
    font-size: 27px;
    line-height: 30px;   /* 27 x 1.1 = 29,7 */
    letter-spacing: -.8px;
  }

}

.ea-eggs__lead {
  margin: 0;
  max-width: 800px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 31px;   /* 17 x 1.8 = 30,6 */
  color: var(--text-2);
}

@media (max-width: 860px) {
  .ea-eggs__lead {
    max-width: 100%;
    font-size: 15px;
    line-height: 27px;   /* 15 x 1.8 = 27 */
  }
}

.ea-eggs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 860px) {
  .ea-eggs__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
    column-gap: 12px;
  }
}

.ea-eggs__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 34px 28px;
  text-align: center;
  background: var(--card);
  border-radius: 70px;
  /* Обводка в макете внутренняя (strokeAlignment: inner). */
  box-shadow: inset 0 0 0 1px var(--line-h);
}

.ea-eggs__n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  line-height: 18px;   /* 13 x 1.36 = 17,68, по конвенции Manrope */
  letter-spacing: 1px;
  color: var(--accent-2);
}

.ea-eggs__en {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 22px;   /* 17 x 1.3 = 22,1 */
  color: var(--text);
}

.ea-eggs__ru {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;   /* 13 x 1.5 = 19,5 */
  color: var(--text-2);
}

.ea-eggs__tag {
  padding: 5px 12px;
  background: var(--bg-soft);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 = 13,31, своего lineHeight в дампе нет */
  color: var(--accent-text);
}

@media (max-width: 860px) {
  /* Внутренний отступ карточки на телефоне не уменьшился - проверено по
     дампу VgDhx, padding тот же [34, 28], что и на десктопе. */
  .ea-eggs__n { font-size: 12px; line-height: 16px; }   /* 12 x 1.36 = 16,32 */
  .ea-eggs__en { font-size: 15px; line-height: 20px; }   /* 15 x 1.3 = 19,5 */
  .ea-eggs__ru { font-size: 12px; line-height: 18px; }   /* 12 x 1.5 = 18 */
}