P01 · מדורג קלאסי

CSS

/* P01 · מדורג קלאסי */
.cwrap{container-type:inline-size}
.cstage{--pad:clamp(20px,4cqi,64px);padding:clamp(36px,5cqi,80px) var(--pad)}
.score{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-inline:auto}
.rb{border-radius:var(--r, 14px);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-weight:600;font-size:14px}
.rb small{font-weight:500;color:inherit;opacity:.65}
.rich{min-height:clamp(110px,16cqi,180px);background:#eef0ff;color:#2b3a99}
.mid{min-height:clamp(84px,12cqi,120px);background:#fff;border:1px solid var(--line, #e4e4ee);color:var(--ink, #16182b)}
.air{min-height:clamp(60px,9cqi,84px);background:#fafafd;border:1px dashed var(--line, #e4e4ee);color:var(--muted, #6a6d85)}
.cta{min-height:clamp(96px,14cqi,130px);background:var(--ink, #16182b);color:#fff}
.hero{min-height:clamp(120px,18cqi,200px);background:linear-gradient(160deg,#3b5bdb,#748ffc);color:#fff}

HTML

<div class="cwrap cstage"><div class="score">
<div class="rb hero"><span>הירו</span><small>C9</small></div><div class="rb rich"><span>יתרונות</span><small>C5 בנטו</small></div><div class="rb air"><span>נשימה</span><small>C14</small></div><div class="rb rich"><span>שירותים</span><small>C3 זיגזג</small></div><div class="rb air"><span>הוכחה</span><small>C10 פס</small></div><div class="rb rich"><span>עדויות</span><small>C13</small></div><div class="rb cta"><span>סגירה</span><small>CTA</small></div>
</div></div>