Hero section with CQ

/* HTML:
<div class="hero-container">
  <div class="hero">
    <div class="hero-content">
      <h2>Title</h2>
      <p>Description</p>
      <div class="hero-actions">...</div>
    </div>
    <div class="hero-visual">...</div>
  </div>
</div>
*/

.hero-container {
  container-type: inline-size;
  container-name: hero;
  width: 100%;
}

.hero {
  display: grid;
  gap: 2rem;
  padding: 2rem;
}

/* Default: single column */
.hero-content {
  padding-right: 0;
}

.hero-visual {
  display: none;
}

/* Wide container: 2 columns */
@container hero (min-width: 48rem) {
  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .hero-content {
    padding-right: 2rem;
  }

  .hero-visual {
    display: flex;
  }
}

/* Narrow container: compact spacing */
@container hero (max-width: 32rem) {
  .hero {
    padding: 1.5rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-btn {
    width: 100%;
  }
}

You are a senior frontend engineer specializing in modern CSS layout.

Goal: Build a hero section component that adapts its layout based on container width using container queries.

Technical constraints:
- Use container-type: inline-size with container-name on the outer wrapper.
- Use @container queries instead of @media for all layout changes.
- Use oklch() for all colors (gradients, backgrounds, text) instead of hex or rgba().
- Include a 2-column layout for wide containers (min-width: 48rem) and single-column for narrow.
- Add a @media (prefers-reduced-motion: reduce) rule to disable animations on buttons.

Framework variant (pick one):
A) Vanilla HTML + CSS only with container queries.
B) React component — accept `children`, `className`, `variant` (compact | standard | wide) props; container query applied to wrapper div.

Edge cases to handle:
- What happens if container queries are not supported? Provide a @media fallback.
- Handle very narrow containers (< 20rem) with stacked, full-width buttons.
- ARIA: ensure interactive elements are keyboard accessible with focus-visible styles.

Return HTML + CSS, clearly separated.