A13 · אותה קומפוזיציה שלוש פעמים

CSS

/* A13 · אותה קומפוזיציה שלוש פעמים */
.cwrap{container-type:inline-size}
.ap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5cqi,28px);padding:clamp(24px,4cqi,56px) clamp(20px,4cqi,64px)}
.pane{position:relative;border-radius:16px;border:1px solid var(--line,#e4e4ee);background:#fff;padding:56px clamp(18px,3cqi,36px) clamp(18px,3cqi,32px);overflow:hidden;display:flex;flex-direction:column;gap:14px}
.pane .lbl{position:absolute;top:14px;inset-inline-start:14px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;z-index:5;line-height:1.3}
.bad .lbl{background:#ffe3e3;color:#a11414}
.good .lbl{background:#e3f7e8;color:#176b2c}
.pane .cap{margin:auto 0 0;padding-top:12px;border-top:1px dashed var(--line,#e4e4ee);font-size:13px;color:var(--muted,#6a6d85);line-height:1.45}
.demo{flex:1;display:flex;flex-direction:column;gap:10px;position:relative}
.tx{height:10px;border-radius:6px;background:#dfe0ea;margin:0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-weight:700;font-size:clamp(18px,2cqi,24px);line-height:1.15;margin:0}
.ph{background:#dfe0ea;border-radius:10px;display:grid;place-items:center;color:#6a6d85;font-size:13px;font-weight:600;min-height:90px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--ink,#16182b);color:#fff;font-weight:600;font-size:14px;line-height:1.2;width:max-content}
@container (max-width:767px){.ap{grid-template-columns:1fr}}
.a13 .sec{border:1px solid var(--line,#e4e4ee);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px}
.a13 .sec small{font-size:11px;font-weight:700;color:#6a6d85}
.a13 .g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.a13 .g i{display:block;height:30px;background:#dfe0ea;border-radius:5px}
.a13 .zz{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.a13 .zz i{display:block;height:30px;background:#dfe0ea;border-radius:5px}
.a13 .zz .t{display:flex;flex-direction:column;gap:5px;justify-content:center}
.a13 .band{height:30px;border-radius:5px;background:#16182b}

HTML

<div class="cwrap a13"><div class="ap"><div class="pane bad"><span class="lbl">ככה לא</span><div class="demo"><div class="sec"><small>יתרונות · C4</small><div class="g"><i></i><i></i><i></i></div></div><div class="sec"><small>שירותים · C4</small><div class="g"><i></i><i></i><i></i></div></div><div class="sec"><small>למה אנחנו · C4</small><div class="g"><i></i><i></i><i></i></div></div></div><p class="cap">שלושה גרידים ברצף. אי אפשר לדעת איפה נגמר סקשן ומתחיל הבא.</p></div><div class="pane good"><span class="lbl">ככה כן</span><div class="demo"><div class="sec"><small>יתרונות · C4</small><div class="g"><i></i><i></i><i></i></div></div><div class="sec"><small>שירותים · C3 זיגזג</small><div class="zz"><i></i><div class="t"><div class="tx m"></div><div class="tx l"></div></div></div></div><div class="sec"><small>למה אנחנו · C10 פס</small><div class="band"></div></div></div><p class="cap">גריד, זיגזג, פס. כל סקשן מודיע על עצמו בצורה שלו.</p></div></div></div>