body {
  --color-1: #23D97B;
  --color-2: #23D97B;
}

li {
  --delay-step: 0.4s;
  --n-reveal-delay: 0.5s;
  --n-reveal-duration: 0.75s;
}


/* :nth-child(-n+6) */

.cards-list--0 li:nth-child(-n+6) {
  --open: 1;
  --global-delay: 2.5s;
  --delay: calc(var(--global-delay) - var(--i) * var(--delay-step));
}

.cards-list--0 .card::after {
  background-image: repeating-linear-gradient(-45deg, #23D97B 4px, transparent 4px, transparent 26px, #23D97B 26px, #23D97B 30px);
}


/* :nth-child(n+4) */

.cards-list--1 li:nth-child(n+4) {
  --open: 1;
  --global-delay: -1.5s;
}

.cards-list--1 .card::after {
  background-image: repeating-linear-gradient(45deg, #23D97B 4px, transparent 4px, transparent 26px, #23D97B 26px, #23D97B 30px);
}


/*  :nth-child(-n+6):nth-child(n+4)  */

.cards-list--2 li:nth-child(-n+6):nth-child(n+4) {
  --open: 1;
  --global-delay: -1.5s;
}

.cards-list--2 .card::after {
  background-image: repeating-linear-gradient(45deg, #23D97B 4px, transparent 4px, transparent 26px, #23D97B 26px, #23D97B 30px), repeating-linear-gradient(-45deg, #23D97B 4px, transparent 4px, transparent 26px, #23D97B 26px, #23D97B 30px);
}

.formula-preview .formula-custom {
  font-size: 20px;
  line-height: 35px;
}

/*
Служебные настройки:

--delay-step — управляет общим шагом времени между поворотом карточек/появлением индексов
--n-reveal-delay - время от появления индекса до поворота карточки
--n-reveal-duration - сколько виден индекс после появления
--global-delay - общая задержка анимаций, по умолчанию 1 сек, для больших N можно делать отрицательной

counter-reset: cardnumber n-index 0;  — при разных значениях формулы в селекторе надо ставить 0 или -1 как начальное значение
для 2n и прочих: 0
для 2n+1 и прочих: -1
*/