From d086e9e753da10269b856aea76f47ba32a7c44e0 Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <me@liz.coffee>
Date: Thu, 1 Jan 2026 18:32:49 -0800
Subject: Massive refactor courtesy of ~5 dollars of tokens. What has my life
 come to.

---
 src/components/DirectionCard.svelte | 71 +++++++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 23 deletions(-)

(limited to 'src/components/DirectionCard.svelte')

diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte
index 0097d33..909feac 100644
--- a/src/components/DirectionCard.svelte
+++ b/src/components/DirectionCard.svelte
@@ -1,26 +1,51 @@
 <script>
-  export let imageSpec;
-  export let direction;
+	export let imageSpec;
+	export let direction;
 </script>
 
-<main>
-  {#if direction == 'right'}
-    <div class="row d-flex align-items-center my-2">
-      <div class="col-md-4 text-center order-sm-1">
-        <img class="img-fluid rounded shadow" src={imageSpec.image} alt={imageSpec.alt} />
-      </div>
-      <div class="col-md-8 border p-4 bg-light rounded shadow order-sm-2">
-        <slot />
-      </div>
-    </div>
-  {:else}
-    <div class="row d-flex align-items-center my-2">
-      <div class="col-md-8 border p-4 bg-light rounded shadow order-md-first order-last">
-        <slot />
-      </div>
-      <div class="col-md-4 text-center">
-        <img class="img-fluid rounded shadow" src={imageSpec.image} alt={imageSpec.alt} />
-      </div>
-    </div>
-  {/if}
-</main>
+<section class="direction-card" class:reverse={direction === 'right'}>
+	<div class="direction-card__row row my-2">
+		<div class="direction-card__media col-md-4">
+			<img
+				class="img-fluid rounded shadow"
+				src={imageSpec.image}
+				alt={imageSpec.alt}
+				loading="lazy"
+				decoding="async"
+			/>
+		</div>
+		<div class="direction-card__content col-md-8 card">
+			<slot />
+		</div>
+	</div>
+</section>
+
+<style>
+	.direction-card__row {
+		align-items: center;
+	}
+
+	.direction-card__media {
+		max-width: 420px;
+		margin-inline: auto;
+	}
+
+	@media (min-width: 768px) {
+		.direction-card__media {
+			max-width: none;
+		}
+
+		.reverse .direction-card__media {
+			order: 2;
+		}
+
+		.reverse .direction-card__content {
+			order: 1;
+		}
+	}
+
+	.direction-card :global(img) {
+		max-height: 520px;
+		object-fit: cover;
+	}
+</style>
-- 
cgit v1.2.3-70-g09d2

