From 81a5bd16991d6933f30093f662adf4273b1007c1 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 26 Aug 2025 22:02:53 -0600
Subject: [PATCH] Feature Grid md breakpoint

---
 app/components/FeatureGrid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index 8e6b1b3..d73eb74 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -7,7 +7,7 @@ import MiniCard from "./MiniCard";
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
     <section
-      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] bg-transparent ${className}`}
+      className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-048)] bg-transparent ${className}`}
       aria-labelledby="feature-grid-headline"
       role="region"
     >
@@ -22,7 +22,7 @@ const FeatureGrid = ({ title, subtitle, className = "" }) => {
         />
 
         {/* MiniCard Grid */}
-        <div className="grid grid-cols-2 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)]">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)]">
           <MiniCard
             backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
             labelLine1="Decision-making"