From b1423571d5fe50c342e651959ba427eb7b2c798b Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <me@liz.coffee>
Date: Thu, 1 Jan 2026 20:27:47 -0800
Subject: Fix mobile direction card

---
 src/components/DirectionCard.svelte | 51 +++++++++++++++----------------------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte
index 7f9d76f..909feac 100644
--- a/src/components/DirectionCard.svelte
+++ b/src/components/DirectionCard.svelte
@@ -3,38 +3,21 @@
 	export let direction;
 </script>
 
-<section class="direction-card">
-	{#if 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>
+<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>
-	{:else}
-		<div class="direction-card__row row my-2">
-			<div class="direction-card__content col-md-8 card">
-				<slot />
-			</div>
-			<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>
-	{/if}
+	</div>
 </section>
 
 <style>
@@ -51,6 +34,14 @@
 		.direction-card__media {
 			max-width: none;
 		}
+
+		.reverse .direction-card__media {
+			order: 2;
+		}
+
+		.reverse .direction-card__content {
+			order: 1;
+		}
 	}
 
 	.direction-card :global(img) {
-- 
cgit v1.2.3-70-g09d2