Show image on external site link cards on homepage

Adds the configured imageUrl as a full-width banner at the top of each
External Sites card, above the link name and description.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.css

@@ -3405,6 +3405,25 @@
     flex-shrink: 0;
   }
 
+  .section-resources .resource-link {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-height: unset;
+  }
+
+  .section-resources .resource-download-meta {
+    width: 100%;
+  }
+
+  .section-resources .resource-link-image {
+    width: 100%;
+    height: 160px;
+    border-radius: 10px;
+    object-fit: cover;
+    margin-bottom: 0.25rem;
+  }
+
   .resource-link-tags {
     margin-top: 0.15rem;
     color: var(--brand-gold);

src/App.tsx

@@ -1117,6 +1117,7 @@ function ExternalSitesSection({ content }: { content: SiteContent }) {
           {links.map(link => (
             <a key={link.id} href={link.url} target="_blank" rel="noreferrer" className="resource-link">
               <div className="resource-download-meta">
+                {link.imageUrl && <img src={link.imageUrl} alt={link.label} className="resource-link-image" />}
                 <span className="resource-link-label">{link.label}</span>
                 {link.description && <p className="resource-link-description">{link.description}</p>}
                 <span className="resource-link-action">Open external site →</span>