.fsteps{--dot:12px;--ring:3px;gap:40px 32px;display:grid}.fstep[data-family=green]{--fam:var(--color-green);--fam-art:var(--color-green-art)}.fstep[data-family=yellow]{--fam:var(--color-yellow);--fam-art:var(--color-yellow-art)}.fstep[data-family=blue]{--fam:var(--color-blue);--fam-art:var(--color-blue-art)}.fstep{border-top:1px solid var(--color-line);padding-top:28px;position:relative}.fstep-dot{left:var(--ring);top:calc(-1 * var(--dot) / 2 - .5px);width:var(--dot);height:var(--dot);background:var(--fam-art);box-shadow:0 0 0 var(--ring) var(--fam);border-radius:50%;position:absolute}@media (min-width:768px){.fsteps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.fsteps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}.fstep{padding-right:32px}}.fsteps-inline-dot{--dot:10px;--ring:3px;width:var(--dot);height:var(--dot);margin:0 var(--ring);background:var(--fam-art);box-shadow:0 0 0 var(--ring) var(--fam);border-radius:50%}.fsteps-inline-dot[data-family=green]{--fam:var(--color-green);--fam-art:var(--color-green-art)}.fsteps-inline-dot[data-family=yellow]{--fam:var(--color-yellow);--fam-art:var(--color-yellow-art)}