Enable CMS-managed site images

src/components/Hero.astro

@@ -1,9 +1,10 @@
 ---
 import { site } from '../lib/site-data.js';
+const { image = site.hero.image, imageAlt = site.hero.imageAlt } = Astro.props;
 ---
 <section class="hero">
-  <div class="shell hero-grid">
+  <div class:list={['shell hero-grid', { 'hero-grid--text-only': !image }]}>
     <div class="hero-copy"><p class="eyebrow">{site.hero.eyebrow}</p><h1>{site.hero.headline}</h1><p class="lede">{site.hero.copy}</p><a class="button" href={site.hero.ctaHref}>{site.hero.cta} <span aria-hidden="true">→</span></a></div>
-    <div class="hero-image"><img src={site.hero.image} alt={site.hero.imageAlt} fetchpriority="high" /><div class="image-note">Kind care. Every day.</div></div>
+    {image && <div class="hero-image"><img src={image} alt={imageAlt} fetchpriority="high" /><div class="image-note">Kind care. Every day.</div></div>}
   </div>
 </section>

src/components/PageIntro.astro

@@ -2,7 +2,7 @@
 const { eyebrow, title, lede, image, imageAlt } = Astro.props;
 ---
 <section class="page-intro">
-  <div class="shell page-intro-grid">
+  <div class:list={['shell page-intro-grid', { 'page-intro-grid--text-only': !image }]}>
     <div><p class="eyebrow">{eyebrow}</p><h1>{title}</h1><p class="lede">{lede}</p></div>
     {image && <img src={image} alt={imageAlt} loading="eager" />}
   </div>