ol.stepper{--default-b:#e1e1e1;--default-c:#000;--active-b:orange;--active-c:#fff;--circle:3.5em;--b:5px;display:grid;gap:20px;background:linear-gradient(var(--default-b) 0 0) no-repeat calc((var(--circle) - var(--b)) / 2) 50% /var(--b) 100%;list-style:none;justify-content:space-between;margin:20px;padding:0;font-size:22px;font-weight:700;counter-reset:step;overflow:hidden}ol.stepper li{display:flex;place-items:center;position:relative;gap:40px;margin-bottom:40px;margin-top:40px;transition:all .5s ease}ol.stepper li:before{content:counter(step) " ";counter-increment:step;display:grid;place-content:center;aspect-ratio:1;height:var(--circle);border:5px solid #fff;box-sizing:border-box;background:var(--active-b);color:var(--active-c);border-radius:50%;z-index:1}ol.stepper li.active~li:before{background:var(--default-b);color:var(--default-c)}ol.stepper li.active:after{content:"";position:absolute;width:var(--b);bottom:100%;left:calc((var(--circle) - var(--b)) / 2);top:auto;right:auto;height:100vw;background:var(--active-b)}@media screen and (max-width:768px){ol.stepper{background:unset}ol.stepper li.active:after,ol.stepper li:after,ol.stepper li:before{display:none}}