C08 · עריכתי, טקסט עוטף

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.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)}

/* C08 · עריכתי, טקסט עוטף */
.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)}
.c8{max-width:62ch;margin-inline:auto}
.c8 .fig{float:inline-start;width:42%;aspect-ratio:1;border-radius:var(--r, 14px);margin:6px 0 12px 24px}
.c8 p{margin:0 0 14px;line-height:1.75;color:var(--muted, #6a6d85)}
.c8 h3{font-size:clamp(22px,2.4cqi,30px);margin:0 0 14px}
@container (max-width:767px){.c8 .fig{float:none;width:100%;aspect-ratio:16/9;margin:0 0 16px}}

HTML

<div class="cwrap cstage"><div class="c8">
  <h3>כותרת בגובה כתבה, לא בגובה באנר</h3>
  <div class="fig ph ph-e"><span class="ph-l">ויז'ואל נטוע</span></div>
  <p>הטקסט זורם סביב הוויז'ואל כמו בעמוד מגזין. הטור צר בכוונה, כי שורה ארוכה מדי מאבדת את הקורא בדרך חזרה לתחילת השורה הבאה, ובעברית זה מורגש עוד יותר.</p>
  <p>הפסקה השנייה ממשיכה לעטוף, ורק כשהוויז'ואל נגמר השורות חוזרות לרוחב המלא של הטור. זה מה שנותן לעמוד תחושה של כתבה שנערכה ולא של תבנית שמולאה.</p>
  <p>במובייל אין מקום לעטיפה, ולכן הוויז'ואל נחלץ מהזרימה והופך לבלוק מלא מעל הטקסט. השינוי הזה מכוון ולא פשרה.</p>
</div></div>