C06 · ציר אנכי ממוספר

CSS

/* C06 · ציר אנכי ממוספר */
.cwrap{container-type:inline-size}
.cstage{--pad:clamp(20px,4cqi,64px);padding:clamp(36px,5cqi,80px) var(--pad)}
.tx{height:11px;border-radius:6px;background:#dfe0ea;margin:9px 0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-size:clamp(22px,2.6cqi,34px);font-weight:700;margin:0 0 10px;line-height:1.2}
.lead{color:var(--muted, #6a6d85);margin:0 0 14px;font-size:15px;line-height:1.6}
.btn{display:inline-block;background:var(--ink, #16182b);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;margin-top:12px}
.cwrap .ph{font-size:clamp(14px,1.6cqi,20px)}
.c6{position:relative;padding-block:8px}
.c6::before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;width:2px;background:var(--line, #e4e4ee)}
.c6 .it{position:relative;width:46%;margin-bottom:clamp(28px,5cqi,64px);background:#fff;border:1px solid var(--line, #e4e4ee);border-radius:var(--r, 14px);padding:20px 22px 20px}
.c6 .it:nth-child(odd){margin-inline-start:0}
.c6 .it:nth-child(even){margin-inline-start:54%}
.c6 .it::after{content:"";position:absolute;top:26px;width:14px;height:14px;border-radius:50%;background:var(--ink, #16182b);inset-inline-end:calc(-8.7% - 7px)}
.c6 .it:nth-child(even)::after{inset-inline-end:auto;inset-inline-start:calc(-8.7% - 7px)}
.c6 .n{position:absolute;top:-10px;inset-inline-end:14px;font-size:clamp(56px,9cqi,120px);font-weight:900;line-height:1;opacity:.08;pointer-events:none}
@container (max-width:767px){.c6::before{inset-inline-start:14px}.c6 .it{width:auto;margin-inline:0 !important;margin-inline-start:40px !important}.c6 .it::after{inset-inline-end:auto !important;inset-inline-start:-33px !important}}

HTML

<div class="cwrap cstage"><div class="c6">
  <div class="it"><span class="n">01</span><h3 class="ttl">שלב ראשון</h3><div class="tx l"></div><div class="tx m"></div></div>
  <div class="it"><span class="n">02</span><h3 class="ttl">שלב שני</h3><div class="tx l"></div><div class="tx s"></div></div>
  <div class="it"><span class="n">03</span><h3 class="ttl">שלב שלישי</h3><div class="tx m"></div><div class="tx l"></div></div>
  <div class="it"><span class="n">04</span><h3 class="ttl">שלב רביעי</h3><div class="tx l"></div><div class="tx m"></div></div>
</div></div>