---
import type { BenefitsSection } from '../../types/home-sections';
import VideoCard from '../VideoCard.astro';
interface Props { section: BenefitsSection }
const { section } = Astro.props;
---
<style>
  .benefit-grid { grid-template-columns: 1.1fr .9fr; }
  @media (max-width: 760px) {
    .benefit-grid { grid-template-columns: 1fr; }
  }
</style>

<section class="section cream-section">
  <div class="container feature-grid benefit-grid">
    <div>
      <h2>{section.heading}</h2>
      <h3>{section.subheading}</h3>
      <ul class="source-list">{section.items.map((item) => <li>{item}</li>)}</ul>
    </div>
    <VideoCard
      image={section.videoImage}
      alt={section.videoImageAlt}
      videoUrl={section.videoUrl}
      videoTitle={section.videoTitle}
    />
  </div>
</section>