<ProductCard> Component

  <div style={{ display: 'grid', justifyContent: 'flex-start' }}>
   <ProductCard
                product={{
                    title: 'Restore 2',
                    description: 'Your bedside sleep guide',
                    price: 99,
                }}
                media={<video style={{ width: '100%', height: 'auto', maxWidth: 400 }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
              />
              </div>
    

<div style={{ backgroundColor: 'var(--hdc-navy-900)', padding: 32 }}>
  <h2 style={{ color: '#fff' }}>Dark Theme</h2>
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 24 }}>
    <ProductCard
      theme="dark"
      product={{
        title: 'Restore 2',
        description: 'Your bedside sleep guide',
        price: 99,
      }}
      media={<video style={{ width: '100%', height: 'auto' }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
    />
    <ProductCard
      theme="dark"
      product={{
        title: 'Restore 2',
        description: 'Your bedside sleep guide',
        price: 99,
      }}
      media={<video style={{ width: '100%', height: 'auto' }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
    />
    <ProductCard
      theme="dark"
      product={{
        title: 'Restore 2',
        description: 'Your bedside sleep guide',
        price: 99,
      }}
      media={<video style={{ width: '100%', height: 'auto' }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
    />
    </div>
  </div>

<div style={{ backgroundColor: 'var(--hdc-neutral-200)', padding: 32 }}>
  <h2 style={{ color: '#000' }}>Light Theme</h2>
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 24 }}>
    <ProductCard
      product={{
        title: 'Restore 2',
        description: 'Your bedside sleep guide',
        price: 99,
      }}
      media={<video style={{ width: '100%', height: 'auto',  }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
    />
    <ProductCard
      product={{
        title: 'Restore 2',
        description: 'Your bedside sleep guide',
        price: 99,
      }}
      media={<video style={{ width: '100%', height: 'auto', }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
    />
    <ProductCard
      product={{
        title: 'Restore 2',
        description: 'Your bedside sleep guide',
        price: 99,
      }}
      media={<video style={{ width: '100%', height: 'auto',  }} autoplay muted src="https://www.datocms-assets.com/98401/1727128991-240901_rest-fallleaves_homepagehero-mobile_compressed.mp4" />}
    />
  </div>
</div>