fix: float featured card image inline with text content

Move the image inside the content flow and float it to the end,
so text wraps around it naturally instead of occupying a separate
column or stacking below.

Author: danielnaab

src/design/components/featured-card/index.tsx

@@ -18,32 +18,27 @@ export function FeaturedCard({ entry, basePath }: { entry: CatalogEntry; basePat
     ? url(entry.overlay.image, basePath)
     : null
   const imageAlt = entry.overlay?.imageAlt ?? ''
-  const hasImage = Boolean(image)
 
   return (
-    <article class={`featured-card${hasImage ? ' featured-card--has-image' : ''}`}>
-      <div class="featured-card__content">
-        <h3 class="featured-card__title">
-          <a href={href}>{title}</a>
-        </h3>
-        <p class="featured-card__summary">{summary}</p>
-        {excerpt ? <p class="featured-card__excerpt">{raw(excerpt)}</p> : null}
-        {highlights ? (
-          <ul class="featured-card__tags">
-            {highlights.map((h) => <li>{h}</li>)}
-          </ul>
-        ) : null}
-        <p class="featured-card__cta">
-          <a href={href}>Explore {title} &rarr;</a>
-        </p>
-      </div>
+    <article class="featured-card">
+      <h3 class="featured-card__title">
+        <a href={href}>{title}</a>
+      </h3>
       {image ? (
-        <div class="featured-card__image">
-          <a href={href} tabindex={-1} aria-hidden="true">
-            <img src={image} alt={imageAlt} loading="lazy" />
-          </a>
-        </div>
+        <a class="featured-card__image" href={href} tabindex={-1} aria-hidden="true">
+          <img src={image} alt={imageAlt} loading="lazy" />
+        </a>
       ) : null}
+      <p class="featured-card__summary">{summary}</p>
+      {excerpt ? <p class="featured-card__excerpt">{raw(excerpt)}</p> : null}
+      {highlights ? (
+        <ul class="featured-card__tags">
+          {highlights.map((h) => <li>{h}</li>)}
+        </ul>
+      ) : null}
+      <p class="featured-card__cta">
+        <a href={href}>Explore {title} &rarr;</a>
+      </p>
     </article>
   )
 }

src/design/components/featured-card/styles.css

@@ -1,32 +1,15 @@
 .featured-card {
-  display: grid;
-  gap: var(--space-5);
   padding: var(--space-6);
   border-inline-start: 3px solid var(--color-accent);
   border-radius: var(--radius-sm);
   background: var(--color-surface);
   box-shadow: var(--shadow-card);
-  container-type: inline-size;
-}
-
-@container (min-width: 40rem) {
-  .featured-card--has-image {
-    grid-template-columns: 1fr 12rem;
-    align-items: start;
-  }
-}
-
-/* ---- Content column ---- */
-
-.featured-card__content {
-  display: grid;
-  gap: var(--space-3);
-  align-content: start;
 }
 
 .featured-card__title {
   font-size: var(--step-2);
   line-height: 1.2;
+  margin-block-end: var(--space-3);
 }
 
 .featured-card__title a {
@@ -38,18 +21,33 @@
   color: var(--color-link-hover);
 }
 
+.featured-card__image {
+  float: inline-end;
+  margin-inline-start: var(--space-5);
+  margin-block-end: var(--space-3);
+}
+
+.featured-card__image img {
+  display: block;
+  max-block-size: 16rem;
+  inline-size: auto;
+  border-radius: var(--radius-sm);
+}
+
 .featured-card__summary {
   font-size: var(--step-0);
   color: var(--color-ink-subtle);
   font-weight: 500;
   max-inline-size: var(--measure-prose);
+  margin-block-end: var(--space-3);
 }
 
 .featured-card__excerpt {
   font-size: var(--step--1);
   color: var(--color-ink-subtle);
   line-height: 1.6;
   max-inline-size: var(--measure-prose);
+  margin-block-end: var(--space-3);
 }
 
 .featured-card__tags {
@@ -58,7 +56,7 @@
   gap: var(--space-2);
   list-style: none;
   padding: 0;
-  margin: 0;
+  margin: 0 0 var(--space-3);
 }
 
 .featured-card__tags li {
@@ -71,7 +69,6 @@
 }
 
 .featured-card__cta {
-  margin-block-start: var(--space-2);
   font-size: var(--step--1);
 }
 
@@ -85,16 +82,3 @@
   color: var(--color-link-hover);
   text-decoration: underline;
 }
-
-/* ---- Image column ---- */
-
-.featured-card__image {
-  justify-self: center;
-}
-
-.featured-card__image img {
-  display: block;
-  max-block-size: 20rem;
-  inline-size: auto;
-  border-radius: var(--radius-sm);
-}