app/components/ContentLockup.js

@@ -59,11 +59,13 @@ const ContentLockup = ({
           {/* Title container */}
           <div className={styles.titleContainer}>
             <h1 className={styles.title}>{title}</h1>
+            {variant === "hero" && (
               <img
                 src="assets/Shapes_1.svg"
                 alt="Decorative shapes"
                 className={styles.shape}
               />
+            )}
           </div>
 
           {/* Subtitle */}

app/components/FeatureGrid.js

@@ -6,13 +6,15 @@ import MiniCard from "./MiniCard";
 
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
+    <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)] md:px-[var(--spacing-scale-048)] 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)] 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="max-w-[1200px] mx-auto gap-[var(--spacing-scale-048)]">
+        <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}
@@ -20,9 +22,10 @@ const FeatureGrid = ({ title, subtitle, className = "" }) => {
               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)]">
+          <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"
@@ -50,6 +53,7 @@ const FeatureGrid = ({ title, subtitle, className = "" }) => {
           </div>
         </div>
       </section>
+    </div>
   );
 };