fix: gridcell style

src/components/Vision/Grid/Grid.astro

@@ -33,7 +33,7 @@ const features = [
 
 <section
   id="grid"
-  class="flex flex-col md:mx-20 lg:mx-40 justify-between items-start gap-y-10 md:flex-row md:flex-wrap"
+  class="flex flex-col md:mx-20 lg:mx-40 justify-between items-start gap-y-10 md:grid md:grid-cols-3 md:gap-x-10 md:gap-y-10"
 >
   <div class="w-[calc(33.33%-20px)] pl-12 pt-5 mx-[10px]">
     <h2 class="text-primary font-display text-4xl leading-[1.6] font-bold">

src/components/Vision/Grid/GridCell.astro

@@ -7,7 +7,9 @@ export interface Props {
 const { title, description } = Astro.props;
 ---
 
-<div class="lg:w-[calc(33.33%-20px)] p-10 bg-black mx-[10px] space-y-5">
+<div
+  class="md:w-full h-full p-10 rounded-md bg-black mx-[10px] space-y-5 hover:ring-2 ring-primary transition-all"
+>
   <h3 class="font-display text-xl md:text-2xl">
     {title}
   </h3>

tailwind.config.cjs

@@ -1,18 +1,24 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  variants: {
+    extend: {
+      boxShadow: ['active']
+    }
+  },
   theme: {
     extend: {
       colors: {
         primary: 'var(--color-aquamarine)',
         "dark-aquamarine": 'var(--color-dark-aquamarine)',
         body: 'var(--color-gray)',
-      },
+        "gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
+      }
     },
     fontFamily: {
       'body': '"Jaldi", sans-serif',
       'display': '"JetBrains Mono", monospace',
       'display2': '"IBM Plex Sans Devanagari", monospace',
-    }
+    },
-  }
+  },
 }