/* Локальная нумерация для горизонтальных карточек в блоке шагов */
.grid-2 {
  counter-reset: horiz-step;
}

/* Убедимся, что карточка — позиционированный контейнер */
.grid-2 .gorizont-card {
  position: relative;
  overflow: hidden; /* чтобы цифра не вылезала за рамку */
}

/* Большая цифра на подложке */
.grid-2 .gorizont-card::before {
  counter-increment: horiz-step;
  content: counter(horiz-step);

  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

  font-size: 5rem;          /* размер цифры */
  font-weight: 700;
  color: var(--exclusive-light);
  opacity: 0.18;            /* полупрозрачная, чтобы не мешала тексту */
  pointer-events: none;     /* чтобы не перехватывала клики */
  z-index: 0;
}

/* Текст поверх цифры, на всякий случай */
.grid-2 .gorizont-card p {
  position: relative;
  z-index: 1;
}

/* На мобильных чуть уменьшим цифры */
@media (max-width: 600px) {
  .grid-2 .gorizont-card::before {
    font-size: 3.5rem;
    right: 15px;
  }
}