body {
    counter-reset: mf-count; /* Set a counter named 'section', and its initial value is 0. */
}
.flow{
    border: 2px solid #d8d8d8;
    border-radius: 10px;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.flow-outter:not(:last-child):after{
    font-family: 'Material Icons';
    content: "double_arrow";
    -webkit-font-feature-settings: 'liga';
    display: flex;
    justify-content: center;
    transform: rotate(90deg);
    font-size: 40pt;
    color: steelblue;
}
.flow-head{
    position: relative;
    z-index: 0;
}
.flow-head::before{
    counter-increment: mf-count;
    content: "STEP " counter(mf-count);
    border: 2px dashed;
    width: 80px;
    height: 80px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
}
.flow-head::after{
    content: '';
    display: block;
    height: 80px;
    width: 80px;
    background: antiquewhite;
    border-radius: 50%;
    top: 3px;
    position: absolute;
    left: 3px;
    z-index: -1;
}
.flow-head span{
    font-size: 20pt;
    color: var(--iclc-red);
    padding-left: 1rem;
}
/* .flow-content{
    padding-left: 80px;
} */