.procedure{grid-template-areas:"one two three""six five four""seven eight nine";place-items:center;row-gap:10rem;display:grid;position:relative}@media not (min-width:1100px){.procedure{grid-template-areas:"one two""four three""five six""eight seven";row-gap:7rem}}@media not (min-width:700px){.procedure{grid-template-areas:"one""two""three""four""five""six""seven""eight";row-gap:5rem}}.procedure svg{width:100%;height:100%;stroke:var(--foreground);fill:none;stroke-width:2px;position:absolute;top:0;left:0}.procedure-step{background:var(--background);border-radius:20px;width:200px;padding:1.5rem;position:relative}.procedure-step:after{content:"";z-index:-1;background:var(--foreground);border-radius:22px;width:calc(100% + 4px);height:calc(100% + 4px);position:absolute;top:-2px;left:-2px}.procedure-step[dada-order="0"]{grid-area:one}.procedure-step[dada-order="1"]{grid-area:two}.procedure-step[dada-order="2"]{grid-area:three}.procedure-step[dada-order="3"]{grid-area:four}.procedure-step[dada-order="4"]{grid-area:five}.procedure-step[dada-order="5"]{grid-area:six}.procedure-step[dada-order="6"]{grid-area:seven}.procedure-step[dada-order="7"]{grid-area:eight}.procedure-step .step-number{aspect-ratio:1;background:var(--c-primary);border:8px solid var(--background);height:3rem;color:var(--c-dark);text-align:center;border-radius:50%;margin:0;padding:0;font-size:1.2rem;font-weight:700;line-height:3rem;position:absolute;top:-2rem;left:-2rem}
