Cinematic video poster

<article class="cmp-cinematic-video-poster cmp-atlas" data-state="idle" data-variant="3">
  <div class="cmp-atlas__content-art" aria-hidden="true"><i></i><i></i><i></i><b>Cvp</b></div>
  <div class="cmp-atlas__content-body">
    <span>Media cards</span>
    <h3>Cinematic video poster</h3>
    <p>
      Offers a dramatic video preview with chapter markers, caption state, and duration before
      playback.
    </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>