diff --git a/src/content/posts/color-schemes.mdx b/src/content/posts/color-schemes.mdx
index eb30cd2..f369bdf 100644
--- a/src/content/posts/color-schemes.mdx
+++ b/src/content/posts/color-schemes.mdx
@@ -22,15 +22,11 @@ import monoDarkProjects from 'src/assets/screenshots/mono-dark-projects.png';
 import monoLightLanding from 'src/assets/screenshots/mono-light-landing.png';
 import monoLightProjects from 'src/assets/screenshots/mono-light-projects.png';
 
-<div class="flex flex-col gap-4">
-  <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 w-[48%]" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" data-img-embed />
-    <Image class="my-0 w-[48%]" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" data-img-embed />
-  </div>
-  <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 w-[48%]" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" />
-    <Image class="my-0 w-[48%]" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" data-img-embed />
-  </div>
+<div class="grid grid-cols-2 gap-4">
+  <Image class="my-0" src={monoDarkLanding} alt="Nordlys landing page in dark mode with mono color scheme" data-img-embed />
+  <Image class="my-0" src={monoLightLanding} alt="Nordlys landing page in light mode with mono color scheme" data-img-embed />
+  <Image class="my-0" src={monoDarkProjects} alt="Nordlys projects page in dark mode with mono color scheme" data-img-embed />
+  <Image class="my-0" src={monoLightProjects} alt="Nordlys projects page in light mode with mono color scheme" data-img-embed />
 </div>
 
 ### Nord
@@ -42,17 +38,14 @@ import nordDarkProjects from 'src/assets/screenshots/nord-dark-projects.png';
 import nordLightLanding from 'src/assets/screenshots/nord-light-landing.png';
 import nordLightProjects from 'src/assets/screenshots/nord-light-projects.png';
 
-<div class="flex flex-col gap-4">
-  <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 w-[48%]" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" data-img-embed />
-    <Image class="my-0 w-[48%]" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" data-img-embed />
-  </div>
-  <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 w-[48%]" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" data-img-embed />
-    <Image class="my-0 w-[48%]" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" data-img-embed />
-  </div>
+<div class="grid grid-cols-2 gap-4">
+  <Image class="my-0" src={nordDarkLanding} alt="Nordlys landing page in dark mode with nord color scheme" data-img-embed />
+  <Image class="my-0" src={nordLightLanding} alt="Nordlys landing page in light mode with nord color scheme" data-img-embed />
+  <Image class="my-0" src={nordDarkProjects} alt="Nordlys projects page in dark mode with nord color scheme" data-img-embed />
+  <Image class="my-0" src={nordLightProjects} alt="Nordlys projects page in light mode with nord color scheme" data-img-embed />
 </div>
 
+
 ### Aurora
 
 The `scheme-aurora` color scheme resembles glowingly green northern lights against a dark grey night sky.
@@ -62,15 +55,11 @@ import auroraDarkProjects from 'src/assets/screenshots/aurora-dark-projects.png'
 import auroraLightLanding from 'src/assets/screenshots/aurora-light-landing.png';
 import auroraLightProjects from 'src/assets/screenshots/aurora-light-projects.png';
 
-<div class="flex flex-col gap-4">
-  <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 w-[48%]" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" data-img-embed />
-    <Image class="my-0 w-[48%]" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" data-img-embed />
-  </div>
-  <div class="flex justify-center gap-4 max-w-full">
-    <Image class="my-0 w-[48%]" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" data-img-embed />
-    <Image class="my-0 w-[48%]" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" data-img-embed />
-  </div>
+<div class="grid grid-cols-2 gap-4">
+  <Image class="my-0" src={auroraDarkLanding} alt="Nordlys landing page in dark mode with aurora color scheme" data-img-embed />
+  <Image class="my-0" src={auroraLightLanding} alt="Nordlys landing page in light mode with aurora color scheme" data-img-embed />
+  <Image class="my-0" src={auroraDarkProjects} alt="Nordlys projects page in dark mode with aurora color scheme" data-img-embed />
+  <Image class="my-0" src={auroraLightProjects} alt="Nordlys projects page in light mode with aurora color scheme" data-img-embed />
 </div>
 
 ## Adding a New Scheme