Video Card Widget

<section class="ws-media-widget bg-[var(--ws-media-widget-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-sm overflow-hidden rounded-2xl border border-[var(--ws-media-widget-border)] bg-[var(--ws-media-widget-bg)] shadow-md">

      <div class="relative aspect-video bg-gradient-to-br from-[var(--ws-media-widget-accent-soft)] to-[var(--ws-media-widget-accent)]/30" role="img" aria-label="Video thumbnail">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="flex size-14 items-center justify-center rounded-full bg-[var(--ws-media-widget-bg)]/90 shadow-lg backdrop-blur-sm">
            <span class="ml-0.5 text-lg text-[var(--ws-media-widget-accent)]" aria-hidden="true">&#x25B6;</span>
          </div>
        </div>
        <div class="absolute bottom-2.5 right-2.5 rounded-md bg-[var(--ws-media-widget-text)]/80 px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-[var(--ws-media-widget-bg)]">12:34</div>
      </div>

      <div class="p-4">
        <h3 class="text-sm font-semibold leading-snug text-[var(--ws-media-widget-text)]">Building Premium UI Components with Tailwind v4</h3>
        <p class="mt-1 text-xs text-[var(--ws-media-widget-text-soft)]">Webspire Studio</p>
        <div class="mt-2 flex items-center gap-1.5">
          <span class="text-xs text-[var(--ws-media-widget-text-muted)]">14.2K views</span>
          <span class="text-[var(--ws-media-widget-text-muted)]" aria-hidden="true">&middot;</span>
          <span class="text-xs text-[var(--ws-media-widget-text-muted)]">3 days ago</span>
        </div>
      </div>

    </div>
  </div>
</section>