P05 · סנדוויץ'

CSS

/* P05 · סנדוויץ' */
.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 או C7</small></div><div class="rb mid"><span>מידע</span><small>C1</small></div><div class="rb mid"><span>מפרט</span><small>C4</small></div><div class="rb mid"><span>שאלות</span><small>C11</small></div><div class="rb mid"><span>מחירים</span><small>C4</small></div><div class="rb cta"><span>סגירה דרמטית</span><small>C16 או CTA</small></div>
</div></div>