ol.stepper{--default-b:#d3d3d3;--default-c:#000;--active-b:#fff;--active-c:#000;--circle:2.9rem;--b:3px;width:90%;display:flex;list-style:none;justify-content:space-between;background:linear-gradient(var(--default-b) 0 0) no-repeat 50% calc((var(--circle) - var(--b))/2)/100% var(--b);padding:0;font-size:17px;font-weight:500;counter-reset:step;overflow:hidden}ol.stepper li:first-child{display:grid;place-items:start;gap:5px;position:relative}ol.stepper li{display:grid;place-items:center;gap:5px;position:relative}ol.stepper li:last-child{display:grid;place-items:end;gap:5px;position:relative}ol.stepper li:before{content:counter(step) " ";counter-increment:step;display:grid;place-content:center;aspect-ratio:1;height:var(--circle);border:3px solid var(--active-c);box-sizing:border-box;background:var(--active-b);color:var(--active-c);border-radius:50%;z-index:1}ol.stepper li.active:before{border:3px solid var(--active-c)}ol.stepper li.active~li:before{background:var(--active-b);border:3px solid var(--default-b);color:var(--default-c)}ol.stepper li.active:first-child:after{right:100%}ol.stepper li.active:after{content:"";position:absolute;height:var(--b);right:50%;top:calc((var(--circle) - var(--b))/2);width:100vw;background:#000}ol.stepper li.active:last-child:after{right:0}@media (min-width:1080px){ol.stepper{display:grid;gap:20px;background:linear-gradient(var(--default-b) 0 0) no-repeat calc((var(--circle) - var(--b))/2) 0/var(--b) 98%}ol.stepper li:first-child{display:flex;place-items:center;gap:5px;position:relative}ol.stepper li,ol.stepper li:last-child{display:flex;place-items:start;gap:5px;position:relative}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-c)}ol.stepper li.active:first-child:after,ol.stepper li.active:last-child:after{right:auto}}