/* ЛОКАЛЬНЫЙ СЛОЙ — состав работ и узлы. Заголовок и абзац на пункт.
   Разделение хайрлайнами: сетка собрана на зазоре 1px по фону линии. */
/* Не сетка, а сбалансированные колонки. У направлений от четырёх до семи
   пунктов, и при сетке последний ряд оставался с одной ячейкой: подбором
   числа колонок это не лечится — любое число даёт сироту на каком-нибудь
   из этих значений. В колонках понятия «последний ряд» нет: браузер делит
   7 на 4+3, 5 на 3+2, 4 на 2+2. Разделение — хайрлайны, как везде на сайте. */
/* Сетка в две колонки, а не текстовые колонки: ячейки одного ряда тянутся
   по высоте, поэтому хайрлайны под ними идут ровно на одном уровне. Тексты
   пунктов приведены к одной длине — в две строки, — чтобы ряды были равными.
   Вертикальная линейка — правая граница левой ячейки. */
.zw-spec__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--sp-7);
  max-width: 1180px;
  border-top: 1px solid var(--line-strong);
}
.zw-spec__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .zw-spec__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--sp-8) + var(--sp-4));
  }
  /* Линейка принадлежит блоку, а не ячейке. Границей ячейки её не нарисовать
     по двум причинам: граница ложится на край колонки, то есть на левую кромку
     промежутка, и обрывается там, где последний ряд остался с одной ячейкой.
     Одна линия на весь блок: середина промежутка при симметричных колонках —
     ровно 50%, отступы сверху и снизу равны полю ячейки, поэтому линия
     не упирается в горизонтальные хайрлайны. */
  .zw-spec__grid { position: relative; }
  .zw-spec__grid::before {
    content: "";
    position: absolute;
    top: var(--sp-5);
    bottom: var(--sp-5);
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: var(--line);
  }
}

.zw-spec__title { font-family: var(--font-head); font-size: var(--size-h3); font-weight: 600; }
.zw-spec__text { font-size: var(--size-card-text); line-height: var(--leading-body); color: var(--ink-body); }

