.s_process_steps[data-vcss='002']  {
    $process-step-number-size: 5rem;

    .s_process_step {
        .s_process_step_number {
            width: $process-step-number-size;
            height: $process-step-number-size;

            // It is possible to add icons or images with the "/" command
            img {
                // Note that we use contain and not cover. For "full images"
                // (like a photo which is a rectangle with colors on the edges),
                // cover would be better. But for "image icons", contain is a
                // better fit (as we want the full icon to be visible). Also
                // in the case of "photos", the user has to be possibility to
                // crop the image to a square, that way it would act as cover.
                object-fit: contain;
            }
        }

        .s_process_step_connector {
            height: $process-step-number-size;
            width: calc(100% - #{$process-step-number-size});
            left: calc(50% + #{$process-step-number-size / 2} + 16px);

            transform: unset;
            // `o_up_curve` uses to indicate the up side curves arrows, as a
            // helper to switch the direction for the `rtl` languages.
            &.o_up_curve {
                transform: scale(1, -1);
            }
            .o_rtl & {
                transform: scale(-1, 1);
                &.o_up_curve {
                    transform: scale(-1, -1);
                }
            }
            path {
                stroke: $border-color;
                fill: transparent;
            }
        }

        &:last-child .s_process_step_connector {
            display: none;
        }
    }

    .s_process_steps_arrow_head path {
        fill: map-get($grays, '600');
        stroke: transparent;
    }

    @include media-breakpoint-down(lg) {
        .s_process_step_connector {
            display: none;
        }
    }
}