ol.process_list { margin:var(--gutter) auto; max-width: 940px;
    --padding: 40px;
    counter-reset: process-list-counter;
    --process-gap: 48px;
    --process-number: 80px;
    --process-size: 40px;


}
ol.process_list >li {
    margin: var(--gutter) 0;
    display: flex;
    counter-increment: process-list-counter;
    padding-left: calc(var(--padding) + 12px);
    position: relative;
}
/*ol.process_list >li > div > b {
   !* width: var(--process-number); min-width: var(--process-number);*!
    display: block; margin-bottom: var(--bodytext_size);
    position: relative;

}

ol.process_list >li > div > b::before{
    content: counter(process-list-counter) "";

    position: relative;  z-index: 2;
    font-weight: 400; font-size: var(--process-number);
    font-family: proxima-sera, serif;
    line-height: 1;



}*/
ol.process_list >li:not(:last-child)::after{
    content:""; display: block; z-index: 1;
    width:2px; background-color: var(--ttl_black);
    /*height: 50%; height: calc(100% - var(--padding) - 16px - (var(--process-size) / 2));
    */
    height: calc(100% - 8px);
    position: absolute; bottom: calc(0px - var(--gutter));
    top: calc(var(--padding) + 20px + (var(--process-size) / 2));
    left: 5px;



}
ol.process_list >li::before{
    content:""; display: block; z-index: 1;
    width:12px; height: 12px; background-color: var(--ttl_black);
    border-radius: 50%;
    position: absolute; top: calc(var(--padding) + (var(--process-size) / 2)); left: 0; transform: translateY(-50%);
}


ol.process_list >li > div{
    flex: 1; padding: var(--padding);
    background: white; border-radius: var(--radius);
    /*display: flex; align-items: center; flex-wrap: wrap;*/
}


ol.process_list >li > div :is(h3,p){
/*    width: 100%;
    font-size:20px; margin: 0; line-height: 1.5;*/
}
@media (prefers-color-scheme: dark) {
    ol.process_list >li > div {

        background: black;
        border: 1px solid white;
        color: white;
    }
    
}

@media all and (min-width: 900px) {
    ol.process_list >li {

        padding-left: 0;
    }
    ol.process_list >li::before{
        left: calc(0px - var(--padding) - 12px);
    }
    ol.process_list >li:not(:last-child)::after{
        left: calc(0px - var(--padding) - 7px);

    }

}
@media all and (max-width: 1199.98px) {
    ol.process_list {
        --padding: 24px;
        --process-number:64px;

    }
}
@media all and (max-width: 899.98px) {
    ol.process_list {

        --process-number:48px;

    }
}
@media all and (max-width: 599.98px) {
    ol.process_list {
        --padding:16px;
        --process-gap:0;
        --process-number:32px;
        --process-size: 32px;
        --process-img: 80px;
    }
    ol.process_list >li {

        position: relative; display: block;

    }
    ol.process_list >li:not(:last-child)::after {
        top: calc(var(--padding) + 16px + (var(--process-size) / 2));

    }
/*    ol.process_list >li > b {
        order: -100;
        position: absolute; top: 0; left: 0; height: 100%;
    }*/



}