Gradient announcement ribbon

<article class="cmp-gradient-announcement-ribbon cmp-atlas" data-state="idle" data-variant="4">
  <div class="cmp-atlas__content-art" aria-hidden="true"><i></i><i></i><i></i><b>Gar</b></div>
  <div class="cmp-atlas__content-body">
    <span>Announcements</span>
    <h3>Gradient announcement ribbon</h3>
    <p>Highlights a product announcement with orbiting metadata, CTA, and reversible dismissal.</p>
    <div class="cmp-atlas__choices">
      <button type="button" data-choice="0" aria-pressed="true">Signal</button
      ><button type="button" data-choice="1" aria-pressed="false">Story</button
      ><button type="button" data-choice="2" aria-pressed="false">Proof</button>
    </div>
    <div class="cmp-atlas__content-foot">
      <small data-output>Chapter 01 · 2 min</small
      ><button
        type="button"
        class="cmp-atlas__primary"
        data-primary
        data-active-label="Paused"
        aria-pressed="false"
      >
        Explore
      </button>
    </div>
    <p data-status aria-live="polite">Signal chapter selected</p>
  </div>
</article>