C13 · פסיפס אסימטרי

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-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}
.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)}

/* C13 · פסיפס אסימטרי */
.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)}
.c13{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4cqi,32px);align-items:start}
.c13 .ph{border-radius:var(--r, 14px)}
.c13 .a{aspect-ratio:4/5}.c13 .b{aspect-ratio:1;transform:translateY(28px) rotate(-1.5deg)}.c13 .c{aspect-ratio:3/4;transform:translateY(-10px)}
.c13 .d{aspect-ratio:1;transform:rotate(1.2deg)}.c13 .e{aspect-ratio:4/5;transform:translateY(22px)}.c13 .f{aspect-ratio:1;transform:translateY(-6px) rotate(-1deg)}
@container (max-width:767px){.c13{grid-template-columns:repeat(2,1fr)}.c13 .b{transform:translateY(12px)}.c13 .e{transform:translateY(10px)}.c13 .c,.c13 .f{transform:none}}

HTML

<div class="cwrap cstage"><div class="c13">
  <div class="ph ph-a a"><span class="ph-l">1</span></div><div class="ph ph-b b"><span class="ph-l">2</span></div><div class="ph ph-c c"><span class="ph-l">3</span></div>
  <div class="ph ph-d d"><span class="ph-l">4</span></div><div class="ph ph-e e"><span class="ph-l">5</span></div><div class="ph ph-f f"><span class="ph-l">6</span></div>
</div></div>