---
import type { HsaFsaSection } from '../../types/home-sections';
interface Props { section: HsaFsaSection }
const { section } = Astro.props;
---
<section class="section section-tint hsa-fsa-section">
  <div class="container feature-grid hsa-fsa-grid">
    <img src={`/assets/images/${section.image}`} alt={section.imageAlt} loading="lazy" />
    <div>
      <h2>{section.heading}</h2>
      <p>{section.body}</p>
    </div>
  </div>
</section>

<style>
  .hsa-fsa-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hsa-fsa-grid img { width: 100%; max-width: 500px; max-height: 425px; object-fit: contain; justify-self: center; }
  @media (max-width: 760px) {
    .hsa-fsa-grid { grid-template-columns: minmax(0, 1fr); }
  }
</style>