fix(insurance): unify carrier logo rows

www/src/components/InsuranceLogoRow.astro

@@ -0,0 +1,119 @@
+---
+interface InsuranceLogo {
+  file: string;
+  alt: string;
+}
+
+interface Props {
+  logos: InsuranceLogo[];
+}
+
+const { logos } = Astro.props;
+const dimensions: Record<string, { width: number; height: number }> = {
+  'bluecrossblueshield-logo-1.webp': { width: 200, height: 120 },
+  'aetna.png': { width: 300, height: 169 },
+  'logo-optum.webp': { width: 200, height: 120 },
+  'logo-tricare-1.webp': { width: 200, height: 120 },
+  'logo-ahcccs.webp': { width: 200, height: 120 },
+  'united-healthcare-logo-1.webp': { width: 200, height: 120 }
+};
+---
+
+<ul class="insurance-logo-row" aria-label="Accepted insurance carriers">
+  {logos.map(({ file, alt }) => {
+    const size = dimensions[file] || { width: 200, height: 120 };
+    return (
+      <li>
+        <img
+          src={`/assets/images/${file}`}
+          alt={alt}
+          width={size.width}
+          height={size.height}
+          loading="lazy"
+        />
+      </li>
+    );
+  })}
+</ul>
+
+<style>
+  .insurance-logo-row {
+    align-items: center;
+    display: grid;
+    gap: 5px;
+    grid-template-columns: 1fr;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .insurance-logo-row li {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .insurance-logo-row img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+    width: 200px;
+  }
+
+  .insurance-logo-row li:first-child img {
+    width: 250px;
+  }
+
+  .insurance-logo-row li:nth-child(2) img {
+    width: 300px;
+  }
+
+  @media (min-width: 640px) and (max-width: 1023px) {
+    .insurance-logo-row {
+      gap: 2rem;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .insurance-logo-row li:nth-child(3n + 1) {
+      justify-content: flex-start;
+    }
+
+    .insurance-logo-row li:nth-child(3n) {
+      justify-content: flex-end;
+    }
+
+    .insurance-logo-row img,
+    .insurance-logo-row li:nth-child(2) img {
+      width: 120px;
+    }
+
+    .insurance-logo-row li:first-child img {
+      width: 150px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .insurance-logo-row {
+      gap: 2rem;
+      grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr));
+    }
+
+    .insurance-logo-row li:first-child {
+      justify-content: flex-start;
+    }
+
+    .insurance-logo-row li:last-child {
+      justify-content: flex-end;
+    }
+
+    .insurance-logo-row img,
+    .insurance-logo-row li:nth-child(2) img {
+      width: 107px;
+    }
+
+    .insurance-logo-row li:first-child img {
+      width: 134px;
+    }
+  }
+</style>

www/src/components/home/HomeInsurance.astro

@@ -1,60 +1,21 @@
 ---
+import InsuranceLogoRow from '../InsuranceLogoRow.astro';
 import type { InsuranceSection } from '../../types/home-sections';
 interface Props { section: InsuranceSection }
 const { section } = Astro.props;
 ---
 <style>
-  .insurance-section .logo-row {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  .insurance-logo-row-wrap {
     margin-top: 2rem;
   }
-
-  .insurance-section .logo-row img {
-    flex: 0 1 auto;
-    max-width: 200px;
-  }
-
-  @media (min-width: 640px) {
-    .insurance-section .logo-row {
-      display: grid;
-      gap: var(--space-lg);
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      align-items: center;
-      justify-items: center;
-    }
-
-    .insurance-section .logo-row img {
-      flex: 0 1 auto;
-      max-width: 25vw;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .insurance-section .logo-row {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-    }
-
-    .insurance-section .logo-row img {
-      flex-basis: 0;
-      flex-grow: 1;
-      max-width: 120px;
-    }
-  }
 </style>
 
 <section class="section insurance-section">
   <div class="container">
     <h2>{section.heading}</h2>
     <p>{section.body}</p>
-    <div class="logo-row">
-      {section.logos.map(({ file, alt }) => (
-        <img src={`/assets/images/${file}`} alt={alt} />
-      ))}
+    <div class="insurance-logo-row-wrap">
+      <InsuranceLogoRow logos={section.logos} />
     </div>
   </div>
 </section>

www/src/components/pages/InsurancePage.astro

@@ -1,42 +1,31 @@
 ---
 import FAQAccordion from '../FAQAccordion.astro';
+import InsuranceLogoRow from '../InsuranceLogoRow.astro';
 
 const logos = [
   {
-    src: '/assets/images/bluecrossblueshield-logo-1.webp',
-    alt: 'bluecross blueshield logo',
-    width: 200,
-    height: 120
+    file: 'bluecrossblueshield-logo-1.webp',
+    alt: 'bluecross blueshield logo'
   },
   {
-    src: '/assets/images/aetna.png',
-    alt: 'aetna logo',
-    width: 300,
-    height: 169
+    file: 'aetna.png',
+    alt: 'aetna logo'
   },
   {
-    src: '/assets/images/logo-optum.webp',
-    alt: 'optum logo',
-    width: 200,
-    height: 120
+    file: 'logo-optum.webp',
+    alt: 'optum logo'
   },
   {
-    src: '/assets/images/logo-tricare-1.webp',
-    alt: 'tricare logo',
-    width: 200,
-    height: 120
+    file: 'logo-tricare-1.webp',
+    alt: 'tricare logo'
   },
   {
-    src: '/assets/images/logo-ahcccs.webp',
-    alt: 'ahcccs logo',
-    width: 200,
-    height: 120
+    file: 'logo-ahcccs.webp',
+    alt: 'ahcccs logo'
   },
   {
-    src: '/assets/images/united-healthcare-logo-1.webp',
-    alt: 'united healthcare logo',
-    width: 200,
-    height: 120
+    file: 'united-healthcare-logo-1.webp',
+    alt: 'united healthcare logo'
   }
 ];
 
@@ -67,13 +56,9 @@ const faqItems = [
       <h2 id="accepted-insurance-heading">Accepted Insurance Carriers</h2>
       <p>We proudly partner with most major insurance carriers providing autism treatment benefits in Arizona. Our team regularly works with insurance plans such as the following.</p>
 
-      <ul class="insurance-logos" aria-label="Accepted insurance carriers">
-        {logos.map((logo) => (
-          <li>
-            <img src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} loading="lazy" />
-          </li>
-        ))}
-      </ul>
+      <div class="insurance-logo-row-wrap">
+        <InsuranceLogoRow logos={logos} />
+      </div>
 
       <p>Our team continually strives to expand this list, increasing access to affordable Applied Behavior Analysis (ABA) therapy coverage. If you do not see your insurance provider listed here, please contact our office. Our staff is always happy to help determine your specific coverage and options.</p>
     </div>
@@ -129,28 +114,8 @@ const faqItems = [
     margin-bottom: 20px;
   }
 
-  .insurance-logos {
-    align-items: center;
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    list-style: none;
+  .insurance-logo-row-wrap {
     margin: 30px 0;
-    padding: 0;
-  }
-
-  .insurance-logos li {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    min-width: 0;
-  }
-
-  .insurance-logos img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-    width: 106px;
   }
 
   @media (max-width: 767px) {
@@ -171,15 +136,9 @@ const faqItems = [
       line-height: 1.25;
     }
 
-    .insurance-logos {
-      gap: 5px;
-      grid-template-columns: 1fr;
+    .insurance-logo-row-wrap {
       margin-block: 20px;
     }
-
-    .insurance-logos img {
-      width: auto;
-    }
   }
 
   @media (min-width: 992px) {