body {
  --color-1: #FFA181;
  --color-2: #F66C41;
}

li {
  --delay-step: 0.3s;
  --n-reveal-delay: 0.5s;
  --n-reveal-duration: 1s;
}

/* :nth-child(3n) */

.cards-list--0 {
  counter-reset: cardnumber n-index 0;
}

.cards-list--0 li:nth-child(3n) {
  --open: 1;
  counter-increment: n-index;
}


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

.cards-list--1 {
  counter-reset: cardnumber n-index 0;
}

.cards-list--1 li:nth-child(4n) {
  --open: 1;
  --global-delay: -0.5s;
  counter-increment: n-index;
}


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

.cards-list--2 {
  counter-reset: cardnumber n-index -1;
}

.cards-list--2 li:nth-child(4n+1) {
  --open: 1;
  --global-delay: 0.5s;
  counter-increment: n-index;
}


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

.cards-list--3 {
  counter-reset: cardnumber n-index -1;
}

.cards-list--3 li:nth-child(4n+2) {
  --open: 1;
  --global-delay: 0s;
  counter-increment: n-index;
}


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

.cards-list--4 {
  counter-reset: cardnumber n-index -1;
}

.cards-list--4 li:nth-child(4n-1) {
  --open: 1;
  --global-delay: -0.25s;
  counter-increment: n-index;
}


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

.cards-list--5 {
  counter-reset: cardnumber n-index 0;
}

.cards-list--5 li:nth-child(4n-2) {
  --open: 1;
  --global-delay: -0.5s;
  counter-increment: n-index;
}


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

--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
*/