C07 · מילה ענקית ולוויינים

CSS

/* C07 · מילה ענקית ולוויינים */
.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)}
.c7{position:relative;text-align:center;padding-block:clamp(24px,6cqi,80px)}
.c7 .big{font-size:clamp(64px,15cqi,220px);font-weight:900;line-height:.92;letter-spacing:-.02em;margin:0}
.c7 .sub{color:var(--muted, #6a6d85);margin-top:8px}
.c7 .sat{position:absolute;background:#fff;border:1px solid var(--line, #e4e4ee);border-radius:12px;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(22,24,43,.06)}
.c7 .s1{top:10%;inset-inline-start:6%}.c7 .s2{top:14%;inset-inline-end:8%}.c7 .s3{bottom:12%;inset-inline-start:12%}.c7 .s4{bottom:8%;inset-inline-end:10%}
.c7 .sats{display:contents}
@container (max-width:767px){.c7 .big{font-size:clamp(56px,22cqi,120px)}.c7 .sats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}.c7 .sat{position:static}}

HTML

<div class="cwrap cstage"><div class="c7">
  <p class="big">340+</p><p class="sub">אתרים שעלו לאוויר</p>
  <div class="sats"><span class="sat s1">12 שנות ניסיון</span><span class="sat s2">4.9 ממוצע ביקורות</span><span class="sat s3">מענה תוך יום</span><span class="sat s4">100% מותאם אישית</span></div>
</div></div>