C05 · בנטו

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* C05 · בנטו */
.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)}
.c5{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(96px,14cqi,150px);gap:clamp(10px,1.6cqi,20px)}
.c5 .cell{border-radius:var(--r, 14px);padding:16px;display:flex;flex-direction:column;justify-content:flex-end}
/* הלבן רק לתאים שאינם ויז'ואל. .c5 .cell (שתי מחלקות) גובר על .ph-a (מחלקה אחת),
   ובלי הסייג הזה תא הגיבור יצא לבן עם טקסט לבן, כלומר ריק. נתפס בצילום, 6.9.2026. */
.c5 .cell:not(.ph):not(.cta){background:#fff;border:1px solid var(--line, #e4e4ee)}
.c5 .hero{grid-column:span 2;grid-row:span 2}
.c5 .tall{grid-row:span 2}
.c5 .num{font-size:clamp(30px,5cqi,56px);font-weight:800;line-height:1}
.c5 .cta{background:var(--ink, #16182b);color:#fff;justify-content:center;align-items:flex-start}
.c5 .cta .btn{background:#fff;color:var(--ink, #16182b)}
.c5 .ph{border-radius:var(--r, 14px)}
@container (max-width:767px){.c5{grid-template-columns:repeat(2,1fr)}.c5 .cell{grid-column:span 1 !important;grid-row:span 1 !important}.c5 .hero{grid-column:span 2 !important}}

HTML

<div class="cwrap cstage"><div class="c5">
  <div class="cell hero ph ph-a"><span class="ph-l">תא גיבור 2 על 2</span></div>
  <div class="cell"><span class="num">120</span><div class="tx m"></div></div>
  <div class="cell tall ph ph-c"><span class="ph-l">תא גבוה</span></div>
  <div class="cell"><div class="tx l"></div><div class="tx s"></div></div>
  <div class="cell"><span class="num">7</span><div class="tx m"></div></div>
  <div class="cell cta"><b>נשאר חור בגריד?</b><span class="btn">תא CTA ממלא אותו</span></div>
</div></div>