:root{
            --steps-count: 6;
            --tl-v-step: clamp(18px, 4.5vw, 36px);
            --tl-h-step: clamp(18px, 6vw, 120px);
        }

        .single-process {
            padding: 60px 0;
        }

        .single-process__paragraph p {
            text-transform: uppercase;
            font-weight: 400;
            font-size: 18px;
            line-height: 120%;
            letter-spacing: 0;
        }

        .single-process__body {
            position: relative;
            margin-top: 48px;
            padding-top: calc(80px + var(--tl-top-offset));
            padding-bottom: 40px;
            min-height: calc(
                    (var(--steps-count) - 1) * var(--tl-v-step)
                    + var(--tl-top-offset)
                    + 100px
            );
        }


        .process-timeline__container{
            --step-x: 0px;
            display: flex;
            flex-direction: column;
            gap: var(--tl-v-step);
            width: 100%;
        }

        .process-timeline__item{
            width: fit-content;
            max-width: 100%;
            transform: translateX(calc(var(--i) * var(--step-x)));
            padding: 0 24px;
            min-height: 48px;
            border-radius: 24px;

            display: flex;
            align-items: center;

            font-size: clamp(12px, 2.6vw, 18px);
            white-space: nowrap;
            transition: transform .25s ease;
        }

        @media (max-width: 600px){
            .process-timeline__item{
                white-space: normal;
                overflow-wrap: anywhere;
            }
        }