diff --git a/src/components/cards/LargeBlogLeftCard.astro b/src/components/cards/LargeBlogLeftCard.astro
index 8993e9c..5bf5f15 100644
--- a/src/components/cards/LargeBlogLeftCard.astro
+++ b/src/components/cards/LargeBlogLeftCard.astro
@@ -30,7 +30,7 @@ const { post } = Astro.props;
         inferSize={true}
       />
     </div>
-    <div class="flex flex-col justify-center bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
+    <div class="card-base-hidden-md flex flex-col justify-center p-6 gap-4">
       <h2 class="card-text-header">
         {post.title}
       </h2>
diff --git a/src/components/cards/LargeBlogRightCard.astro b/src/components/cards/LargeBlogRightCard.astro
index 18a6bae..dc0839d 100644
--- a/src/components/cards/LargeBlogRightCard.astro
+++ b/src/components/cards/LargeBlogRightCard.astro
@@ -20,7 +20,7 @@ const { post } = Astro.props;
     href={`/blog/${post.slug}`}
     data-astro-prefetch
   >
-    <div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
+    <div class="card-base-hidden-md flex flex-col p-6 gap-4">
       <h2 class="card-text-header">
         {post.title}
       </h2>
diff --git a/src/styles/global.css b/src/styles/global.css
index 12d1b9d..91120cc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+
 @import './utilities-buttons.css';
 @import './utilities-cards.css';
 @import './utilities-misc.css';
@@ -47,7 +48,7 @@
   /* Background colors */
   --color-background: light-dark(var(--color-neutral-200), var(--color-mist-800));
   --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-mist-900) 20%, transparent));
-  --color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 50%, transparent));
+  --color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 40%, transparent));
 
   --color-background-1: light-dark(color-mix(in srgb, var(--color-mist-200) 75%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 95%, var(--color-mist-950)));
   --color-background-2: light-dark(color-mix(in srgb, var(--color-mist-400) 10%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 80%, var(--color-mist-950)));
diff --git a/src/styles/utilities-cards.css b/src/styles/utilities-cards.css
index 9a05786..bdd3f9e 100644
--- a/src/styles/utilities-cards.css
+++ b/src/styles/utilities-cards.css
@@ -13,6 +13,13 @@
          hover:bg-mist-400/20 dark:hover:bg-mist-800/40
 }
 
+@utility card-base-hidden-md {
+  @apply transition-all duration-300
+         rounded-b-2xl
+         bg-background-card md:bg-transparent
+         group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-mist-900/70 md:dark:group-hover:bg-transparent
+}
+
 @utility card-hover-icon-color {
   @apply transition-all duration-300
          text-primary