Четыре карточки, одна длинная с кружками
Заполнение
Можно добавлять множество блоков по 4 карточки.
В каждом блоке присутствует 3 короткие карточки и одна длинная, в которой слайдер с кружками.
Если карточка не заполнена - она не отобразится. Таким образом можно спокойно добавить еще один блок, в нем заполнить одну карточку, и она растянется на всю ширину экрана.
Условия отображения обычной карточки - заполнены все поля.
Условия отображения длинной - заполнены все поля самой карточки, есть хотя бы одна персона, и у нее тоже заполнены все поля.
Кружки в длинной карточке всегда будут зациклены, даже если заполнить только 1 персону.
Механики и инфо для QA
Слайдер кружков свайпается мышкой/пальцем и переключается стрелками в десктопе.
Когда на экране видно хотя бы 50% высоты среднего кружка, включается анимация. Бордер кружка заполняется зеленым цветом. При достижении полного круга, происходит автоматический свайп вправо.
Если проскроллить так чтобы кружок на хотя бы 51% скрылся за экраном, анимация приостановится.