.c-stepper {
    display: flex;
    flex-wrap: wrap;
}

.c-stepper__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.c-stepper__item:not(:last-child) {
    flex: 1;
}

.c-stepper__item:before {
    --size: 3rem;
    content: "";

    display: block;
    flex: 0 0 var(--size);
    height: var(--size);
    border-radius: 50%;
}

.c-stepper__item:not(:last-child):after {
    content: "";
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(150deg,
            /* Direction of the gradient */
            red,
            /* First color */
            white 20px,
            /* End of first color */
            red 20px,
            /* Start of second color */
            white 20px
            /* End of second color */
        );
    margin-inline-end: 0.5rem;
}