Video card

.video-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: clip;
}

.video-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-thumb .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

You are a senior frontend engineer implementing a video preview card.

Goal: A responsive card with a 16:9 thumbnail, a centered play overlay, and a metadata section (title, description, chips).

Technical constraints:
- Use aspect-ratio: 16 / 9 for the thumbnail container.
- Use CSS grid (place-items: center) to center the play overlay.
- Use border-radius + overflow: clip on the card to clip the thumbnail edges.
- Ensure the play overlay is purely decorative (aria-hidden) unless it is a real button.
- Use oklch() for any explicit colors and var(--*) tokens for surfaces/borders where possible.

Framework variant (pick one):
A) Vanilla HTML/CSS card component.
B) React component <VideoCard /> with props: title, description, duration, views.

Edge cases to handle:
- Long titles: clamp lines with line-clamp or max-height and overflow.
- Small widths: stack metadata neatly and keep chips wrapping.
- Reduced motion: avoid hover-only affordances; keep it readable without animations.

Return HTML + CSS.