---
const logos = ['aetna.png', 'bluecrossblueshield-logo-1.webp', 'logo-ahcccs.webp', 'logo-optum.webp', 'logo-tricare-1.webp', 'united-healthcare-logo-1.webp'];
---
<section class="insurance-strip" aria-labelledby="insurance-title">
  <div class="container"><h2 id="insurance-title">Insurance partners</h2><div class="logo-row">{logos.map((logo) => <img src={`/assets/images/${logo}`} alt="" loading="lazy" />)}</div></div>
</section>

<style>
  .insurance-strip { background: white; border-block: 1px solid var(--color-border); padding-block: var(--space-lg); text-align: center; }
  .insurance-strip h2 { font-size: 1.4rem; }
  .logo-row { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
  .logo-row img { filter: grayscale(1); max-height: 55px; max-width: 130px; }
</style>