1 files changed, 57 insertions, 23 deletions
diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte
index 0097d33..7f9d76f 100644
--- a/src/components/DirectionCard.svelte
+++ b/src/components/DirectionCard.svelte
@@ -1,26 +1,60 @@
 <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">
+	{#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>
+		</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>
+	{/if}
+</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;
+		}
+	}
+
+	.direction-card :global(img) {
+		max-height: 520px;
+		object-fit: cover;
+	}
+</style>