Hero Banner xl breakpoint

app/components/ContentLockup.js

@@ -6,35 +6,53 @@ const ContentLockup = ({ title, subtitle, description, ctaText, ctaHref }) => {
   return (
     <div className="flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10">
       {/* Text content container */}
-      <div className="flex flex-col">
+      <div className="flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]">
-        {/* Title container */}
+        {/* Title and subtitle group - no gap between them at xl */}
-        <div className="flex gap-[var(--spacing-scale-008)] items-center">
+        <div className="flex flex-col xl:gap-0">
-          <h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] text-[var(--color-content-inverse-primary)]">
+          {/* Title container */}
-            {title}
+          <div className="flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center">
-          </h1>
+            <h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
-          <img
+              {title}
-            src="/assets/Shapes_1.svg"
+            </h1>
-            alt="Decorative shapes"
+            <img
-            className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"
+              src="/assets/Shapes_1.svg"
-          />
+              alt="Decorative shapes"
+              className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"
+            />
+          </div>
+
+          {/* Subtitle */}
+          <h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
+            {subtitle}
+          </h2>
         </div>
 
-        {/* Subtitle */}
+        {/* Description - 20px gap from subtitle at xl */}
-        <h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] text-[var(--color-content-inverse-primary)]">
+        <p className="font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]">
-          {subtitle}
-        </h2>
-
-        {/* Description */}
-        <p className="font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]">
           {description}
         </p>
       </div>
 
       {/* CTA Button */}
       <div className="flex justify-start">
-        <Button variant="primary" size="small">
+        {/* Small button for xsm and sm breakpoints */}
-          {ctaText}
+        <div className="block md:hidden">
-        </Button>
+          <Button variant="primary" size="small">
+            {ctaText}
+          </Button>
+        </div>
+        {/* Large button for md and lg breakpoints */}
+        <div className="hidden md:block xl:hidden">
+          <Button variant="primary" size="large">
+            {ctaText}
+          </Button>
+        </div>
+        {/* XLarge button for xl breakpoint */}
+        <div className="hidden xl:block">
+          <Button variant="primary" size="xlarge">
+            {ctaText}
+          </Button>
+        </div>
       </div>
     </div>
   );

app/components/HeroBanner.js

@@ -5,7 +5,7 @@ import HeroDecor from "./HeroDecor";
 
 const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
   return (
-    <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)]">
+    <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
       <div className="flex flex-col gap-[var(--spacing-scale-010)]">
         {/* Frame container for content */}
         <div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">