style icons

DHBern · May 27, 2024 · a2273a0 · a2273a0
1 parent 54d5ead
commit a2273a0
Showing 1 changed file with 31 additions and 21 deletions.
diff --git a/src/routes/region/black-atlantic/+page.svelte b/src/routes/region/black-atlantic/+page.svelte
@@ -47,27 +47,37 @@
 				</ul>
 			{/snippet}
 			{#snippet icons()}
-				<dl class="my-2 flex gap-2 items-center flex-wrap">
-					<dt>
-						<enhanced:img src="$lib/icons/black-atlantic/BA_death.svg" alt="death icon" />
-					</dt>
-					<dd class="mr-4">Death</dd>
-					<dt>
-						<enhanced:img src="$lib/icons/black-atlantic/BA_leisure.svg" alt="leisure icon" />
-					</dt>
-					<dd class="mr-4">Leisure</dd>
-					<dt>
-						<enhanced:img src="$lib/icons/black-atlantic/BA_migration.svg" alt="migration icon" />
-					</dt>
-					<dd class="mr-4">Migration</dd>
-					<dt>
-						<enhanced:img src="$lib/icons/black-atlantic/BA_myth.svg" alt="myth icon" />
-					</dt>
-					<dd class="mr-4">Myth</dd>
-					<dt>
-						<enhanced:img src="$lib/icons/black-atlantic/BA_pollution.svg" alt="pollution icon" />
-					</dt>
-					<dd class="mr-4">Pollution</dd>
+				<dl class="my-2 flex gap-2 items-center flex-wrap lg:grid">
+					<div class="contents lg:flex gap-2 items-center">
+						<dt>
+							<enhanced:img src="$lib/icons/black-atlantic/BA_death.svg" alt="death icon" />
+						</dt>
+						<dd class="mr-4">Death</dd>
+					</div>
+					<div class="contents lg:flex gap-2 items-center">
+						<dt>
+							<enhanced:img src="$lib/icons/black-atlantic/BA_leisure.svg" alt="leisure icon" />
+						</dt>
+						<dd class="mr-4">Leisure</dd>
+					</div>
+					<div class="contents lg:flex gap-2 items-center">
+						<dt>
+							<enhanced:img src="$lib/icons/black-atlantic/BA_migration.svg" alt="migration icon" />
+						</dt>
+						<dd class="mr-4">Migration</dd>
+					</div>
+					<div class="contents lg:flex gap-2 items-center">
+						<dt>
+							<enhanced:img src="$lib/icons/black-atlantic/BA_myth.svg" alt="myth icon" />
+						</dt>
+						<dd class="mr-4">Myth</dd>
+					</div>
+					<div class="contents lg:flex gap-2 items-center">
+						<dt>
+							<enhanced:img src="$lib/icons/black-atlantic/BA_pollution.svg" alt="pollution icon" />
+						</dt>
+						<dd class="mr-4">Pollution</dd>
+					</div>
 				</dl>
 			{/snippet}
 			<div class="lg:hidden">