<section µ-hero="full" >
  <img src="files/hero-v1.jpg" alt="" loading="lazy">
  <div>
    <header>
      <small>Hero · full bleed</small>
      <h1>Chrome calls it 'wasted bytes'.
      The industry calls it 'best practice'.</h1>
      <p>~90% of the code content websites ship every day is useless to the reader — and everyone pays for it anyway.</p>
    </header>
    <div µ-flex>
      <a href="#" role="button">Get started</a>
      <a href="#" role="button">Learn more</a>
    </div>
  </div>
</section>

/* A direct > img child turns the hero into a full-bleed cover. */
[µ-hero] {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--max-width); margin: 1.5rem auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--card-grad);

  & > img { position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover; }
  &:has(> img)::after { content: ""; position: absolute; inset: 0;
    z-index: -1; background: linear-gradient(90deg, rgba(7,9,13,.86), rgba(7,9,13,.45)); }
  &:has(> img) h1 { -webkit-text-fill-color: #fff; color: #fff; background: none; }
}
/* full-bleed variant breaks the max-width, re-centres the inner column */
[µ-hero~="full"] {
  max-width: 100%;
  & > div { max-width: var(--max-width); margin: 0 auto; }
}

<section µ-grid="2-col content reverse">
  <figure><img src="files/content-v4-left-image.jpg?v=83" alt="Analytics preview"></figure>
  <div>
    <header><small>By the numbers</small><h2>A silent killer of page visibility</h2></header>
    <p>Residual code launches a dual-front assault…</p>
    <div µ-grid="2-col stats">
      <div><b>~2<span>%</span></b><h3>The words you came for</h3><p>…</p></div>
      <div><b>251<span>KB</span></b><h3>Shipped, never executed</h3><p>…</p></div>
      <div> … </div>
    </div>
  </div>
</section>

/* 2-col from mode.css; "content" adds the split rhythm, "reverse" floats
   the media into the first column, "stats" styles the number sub-grid.  */
[µ-grid~="content"] {
  align-items: center; gap: clamp(1.5rem, 5vw, 3rem);
  & > figure img, & > img { width: 100%; border-radius: var(--radius);
    border: 1px solid var(--color-border); }
  & header small { display: block; font-family: var(--font-mono);
    letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
}
@media (min-width: 640px) {
  [µ-grid~="content"][µ-grid~="reverse"] > figure { order: -1; }
}
[µ-grid~="stats"] b {
  display: block; font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1;
  background: linear-gradient(120deg, var(--ember-2), var(--color-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}