feat: change large card hover

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>

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>

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)));

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