From b789dc595e77051345d644dde5f34e8fb0820907 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 26 Aug 2025 23:09:21 -0600
Subject: [PATCH] Feature Grid xl breakpoint

---
 app/components/ContentLockup.js | 12 +++--
 app/components/FeatureGrid.js   | 88 +++++++++++++++++----------------
 2 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index 6a3099f..fbdb486 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -59,11 +59,13 @@ const ContentLockup = ({
           {/* Title container */}
           <div className={styles.titleContainer}>
             <h1 className={styles.title}>{title}</h1>
-            <img
-              src="assets/Shapes_1.svg"
-              alt="Decorative shapes"
-              className={styles.shape}
-            />
+            {variant === "hero" && (
+              <img
+                src="assets/Shapes_1.svg"
+                alt="Decorative shapes"
+                className={styles.shape}
+              />
+            )}
           </div>
 
           {/* Subtitle */}
diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index d73eb74..f6e19c1 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -6,50 +6,54 @@ import MiniCard from "./MiniCard";
 
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
-    <section
-      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"
-    >
-      <div className="max-w-[1200px] mx-auto gap-[var(--spacing-scale-048)]">
-        {/* Feature Content Lockup */}
-        <ContentLockup
-          title={title}
-          subtitle={subtitle}
-          variant="feature"
-          linkText="Learn more"
-          linkHref="#"
-        />
+    <div className="p-0 lg:p-[var(--spacing-scale-064)]">
+      <section
+        className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] ${className}`}
+        aria-labelledby="feature-grid-headline"
+        role="region"
+      >
+        <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
+          {/* Feature Content Lockup */}
+          <div className="lg:shrink lg:min-w-0">
+            <ContentLockup
+              title={title}
+              subtitle={subtitle}
+              variant="feature"
+              linkText="Learn more"
+              linkHref="#"
+            />
+          </div>
 
-        {/* MiniCard Grid */}
-        <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"
-            labelLine2="support"
-            panelContent="assets/Feature_Support.png"
-          />
-          <MiniCard
-            backgroundColor="bg-[#D1FFE2]"
-            labelLine1="Values alignment"
-            labelLine2="exercises"
-            panelContent="assets/Feature_Exercises.png"
-          />
-          <MiniCard
-            backgroundColor="bg-[#F4CAFF]"
-            labelLine1="Membership"
-            labelLine2="guidance"
-            panelContent="assets/Feature_Guidance.png"
-          />
-          <MiniCard
-            backgroundColor="bg-[#CBDDFF]"
-            labelLine1="Conflict resolution"
-            labelLine2="tools"
-            panelContent="assets/Feature_Tools.png"
-          />
+          {/* MiniCard Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-[var(--spacing-scale-012)] mt-[var(--spacing-scale-048)] lg:mt-0 lg:flex-grow lg:shrink-0">
+            <MiniCard
+              backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
+              labelLine1="Decision-making"
+              labelLine2="support"
+              panelContent="assets/Feature_Support.png"
+            />
+            <MiniCard
+              backgroundColor="bg-[#D1FFE2]"
+              labelLine1="Values alignment"
+              labelLine2="exercises"
+              panelContent="assets/Feature_Exercises.png"
+            />
+            <MiniCard
+              backgroundColor="bg-[#F4CAFF]"
+              labelLine1="Membership"
+              labelLine2="guidance"
+              panelContent="assets/Feature_Guidance.png"
+            />
+            <MiniCard
+              backgroundColor="bg-[#CBDDFF]"
+              labelLine1="Conflict resolution"
+              labelLine2="tools"
+              panelContent="assets/Feature_Tools.png"
+            />
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </div>
   );
 };