From ffdc9b72691549093589b35667d28513bf112a5d Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 27 Aug 2025 10:36:50 -0600
Subject: [PATCH] Fix outer padding

---
 app/components/FeatureGrid.js | 102 +++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index 0cdec2e..fe91bb3 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -7,61 +7,63 @@ import MiniCard from "./MiniCard";
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
     <section
-      className={`p-0 lg:p-[var(--spacing-scale-064)] 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)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`}
+      className={`p-0 lg:p-[var(--spacing-scale-064)] ${className}`}
       aria-labelledby="feature-grid-headline"
       role="region"
       tabIndex={-1}
     >
-      <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>
+      <div 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)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2">
+        <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)] lg:mt-0 lg:flex-grow lg:shrink-0"
-          role="grid"
-          aria-label="Feature tools and services"
-        >
-          <MiniCard
-            backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
-            labelLine1="Decision-making"
-            labelLine2="support"
-            panelContent="assets/Feature_Support.png"
-            ariaLabel="Decision-making support tools"
-            href="#decision-making"
-          />
-          <MiniCard
-            backgroundColor="bg-[#D1FFE2]"
-            labelLine1="Values alignment"
-            labelLine2="exercises"
-            panelContent="assets/Feature_Exercises.png"
-            ariaLabel="Values alignment exercises"
-            href="#values-alignment"
-          />
-          <MiniCard
-            backgroundColor="bg-[#F4CAFF]"
-            labelLine1="Membership"
-            labelLine2="guidance"
-            panelContent="assets/Feature_Guidance.png"
-            ariaLabel="Membership guidance resources"
-            href="#membership-guidance"
-          />
-          <MiniCard
-            backgroundColor="bg-[#CBDDFF]"
-            labelLine1="Conflict resolution"
-            labelLine2="tools"
-            panelContent="assets/Feature_Tools.png"
-            ariaLabel="Conflict resolution tools"
-            href="#conflict-resolution"
-          />
+          {/* 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"
+            role="grid"
+            aria-label="Feature tools and services"
+          >
+            <MiniCard
+              backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
+              labelLine1="Decision-making"
+              labelLine2="support"
+              panelContent="assets/Feature_Support.png"
+              ariaLabel="Decision-making support tools"
+              href="#decision-making"
+            />
+            <MiniCard
+              backgroundColor="bg-[#D1FFE2]"
+              labelLine1="Values alignment"
+              labelLine2="exercises"
+              panelContent="assets/Feature_Exercises.png"
+              ariaLabel="Values alignment exercises"
+              href="#values-alignment"
+            />
+            <MiniCard
+              backgroundColor="bg-[#F4CAFF]"
+              labelLine1="Membership"
+              labelLine2="guidance"
+              panelContent="assets/Feature_Guidance.png"
+              ariaLabel="Membership guidance resources"
+              href="#membership-guidance"
+            />
+            <MiniCard
+              backgroundColor="bg-[#CBDDFF]"
+              labelLine1="Conflict resolution"
+              labelLine2="tools"
+              panelContent="assets/Feature_Tools.png"
+              ariaLabel="Conflict resolution tools"
+              href="#conflict-resolution"
+            />
+          </div>
         </div>
       </div>
     </section>