diff --git a/app/(site)/feedback/page.tsx b/app/(site)/feedback/page.tsx
index f8356fe..db47cc7 100644
--- a/app/(site)/feedback/page.tsx
+++ b/app/(site)/feedback/page.tsx
@@ -4,7 +4,7 @@ import data from "@/app/data/feedback.json";
 
 export default function FeedbackPage() {
   return (
-    <main className="relative min-h-screen pt-[160px] pb-[80px] px-[var(--spacing-gutter)]">
+    <main className="relative min-h-screen pt-[120px] pb-[80px] px-[var(--spacing-gutter)]">
       <div className="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[min(800px,90vh)] hero-glow -z-10" />
 
       <div className="max-w-[800px] mx-auto">
@@ -21,7 +21,7 @@ export default function FeedbackPage() {
         </div>
 
         <div className="text-center mb-10 md:mb-14">
-          <h1 className="font-[var(--font-display-lg)] text-[clamp(2rem,4vw+1rem,4.5rem)] leading-tight font-bold tracking-tighter mb-4 text-primary">
+          <h1 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3vw+1rem,3.25rem)] leading-tight font-bold tracking-tighter mb-4 text-primary">
             {data.title}
           </h1>
           <p className="text-on-surface-variant text-lg max-w-2xl mx-auto">{data.subtitle}</p>
diff --git a/app/(site)/registration/page.tsx b/app/(site)/registration/page.tsx
index a99bd34..02c7dcd 100644
--- a/app/(site)/registration/page.tsx
+++ b/app/(site)/registration/page.tsx
@@ -4,7 +4,7 @@ import data from "@/app/data/registration.json";
 
 export default function RegistrationPage() {
   return (
-    <main className="pt-[160px] pb-[80px] px-[var(--spacing-gutter)] flex justify-center">
+    <main className="pt-[120px] pb-[80px] px-[var(--spacing-gutter)] flex justify-center">
       <div className="w-full max-w-[1280px]">
         <div className="max-w-[800px] mx-auto">
           <div className="mb-[32px]">
@@ -20,7 +20,7 @@ export default function RegistrationPage() {
           </div>
 
           <div className="mb-[32px]">
-            <h1 className="font-[var(--font-display-lg)] text-[clamp(2.25rem,3vw+1rem,4.5rem)] text-on-surface mb-2 leading-[1.1]">
+            <h1 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3vw+1rem,3.25rem)] text-on-surface mb-2 leading-[1.1]">
               {data.title}
             </h1>
             <p className="text-on-surface-variant text-lg">{data.subtitle}</p>
diff --git a/app/components/home/AgendaSection.tsx b/app/components/home/AgendaSection.tsx
index 67467fd..a271e06 100644
--- a/app/components/home/AgendaSection.tsx
+++ b/app/components/home/AgendaSection.tsx
@@ -10,17 +10,17 @@ export default function AgendaSection({
   };
 }) {
   return (
-    <section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
-      <div className="flex flex-col xl:flex-row justify-between xl:items-end mb-12 lg:mb-24 gap-8">
+    <section className="py-16 lg:py-24 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
+      <div className="flex flex-col lg:flex-row justify-between lg:items-end mb-12 lg:mb-24 gap-8">
         <div className="max-w-3xl">
           <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-4 lg:mb-8 tracking-[0.25em]">
             {data.eyebrow}
           </span>
-          <h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
+          <h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)]">
             {data.title}
           </h2>
         </div>
-        <p className="text-on-surface-variant/60 text-base lg:text-[20px] max-w-md xl:text-right">
+        <p className="text-on-surface-variant/60 text-base lg:text-lg max-w-md xl:text-right">
           {data.description}
         </p>
       </div>
@@ -29,22 +29,22 @@ export default function AgendaSection({
         {data.items.map((item) => (
           <div
             key={item.order}
-            className="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors"
+            className="glass-panel p-6 lg:p-10 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors"
           >
             <div className="absolute top-0 right-0 p-6 lg:p-8">
-              <span className="font-[var(--font-display-lg)] text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">
+              <span className="font-[var(--font-display-lg)] text-xl lg:text-[32px] text-primary/20 group-hover:text-primary transition-colors">
                 {item.order}
               </span>
             </div>
             <div className="mb-6 lg:mb-10">
-              <span className="font-[var(--font-display-lg)] text-2xl lg:text-[36px] text-primary">
+              <span className="font-[var(--font-display-lg)] text-xl lg:text-[28px] text-primary">
                 {item.time}
               </span>
             </div>
-            <h3 className="font-[var(--font-display-lg)] text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">
+            <h3 className="font-[var(--font-display-lg)] text-lg lg:text-[24px] text-on-surface mb-3 lg:mb-4">
               {item.title}
             </h3>
-            <p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">
+            <p className="text-xs lg:text-base text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">
               {item.description}
             </p>
             <div className="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500" />
diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx
index 134e27c..32f3ef1 100644
--- a/app/components/home/HeroSection.tsx
+++ b/app/components/home/HeroSection.tsx
@@ -13,33 +13,33 @@ export default function HeroSection({
   };
 }) {
   return (
-    <section className="relative min-h-[90vh] lg:min-h-screen flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
+    <section className="relative min-h-[80vh] lg:min-h-[90vh] flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
       <div className="relative z-10 max-w-hd mx-auto w-full">
         <div className="max-w-7xl">
           <div className="inline-flex items-center gap-3 lg:gap-4 px-4 lg:px-8 py-2 lg:py-3 rounded-full bg-surface-container-high border border-primary/30 mb-8 lg:mb-16">
             <span className="material-symbols-outlined text-primary text-[20px] lg:text-[26px]">
               {data.badgeIcon}
             </span>
-            <span className="font-[var(--font-label-caps)] text-xs lg:text-[16px] text-on-surface">
+            <span className="font-[var(--font-label-caps)] text-xs lg:text-[14px] text-on-surface">
               {data.badgeText}
             </span>
           </div>
-          <h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-10 leading-[1.1] text-[clamp(2.25rem,5vw+1rem,6.875rem)]">
+          <h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-8 leading-[1.1] text-[clamp(1.75rem,3.5vw+1rem,4.25rem)]">
             {data.title}
           </h1>
-          <p className="text-on-surface-variant text-lg lg:text-[28px] mb-10 lg:mb-20 max-w-4xl leading-relaxed opacity-90">
+          <p className="text-on-surface-variant text-base lg:text-[22px] mb-8 lg:mb-16 max-w-3xl leading-relaxed opacity-90">
             {data.subtitle}
           </p>
           <div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
             <Link
               href={data.primaryCta.href}
-              className="gold-gradient-bg text-on-primary px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
+              className="gold-gradient-bg text-on-primary px-8 lg:px-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
             >
               {data.primaryCta.label}
             </Link>
             <Link
               href={data.secondaryCta.href}
-              className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
+              className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
             >
               {data.secondaryCta.label}
             </Link>
diff --git a/app/components/home/StatsSection.tsx b/app/components/home/StatsSection.tsx
index 70ec542..6d95ed4 100644
--- a/app/components/home/StatsSection.tsx
+++ b/app/components/home/StatsSection.tsx
@@ -5,17 +5,17 @@ export default function StatsSection({
 }) {
   return (
     <section
-      className="py-16 lg:py-32 bg-surface-container-low border-y border-primary/10"
+      className="py-12 lg:py-20 bg-surface-container-low border-y border-primary/10"
       id={data.id}
     >
       <div className="max-w-hd mx-auto px-[var(--spacing-gutter)]">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-32 text-center">
           {data.items.map((x) => (
             <div key={x.label} className="space-y-3 lg:space-y-6">
-              <div className="font-[var(--font-display-lg)] text-5xl lg:text-[96px] text-primary">
+              <div className="font-[var(--font-display-lg)] text-4xl lg:text-7xl text-primary leading-none">
                 {x.value}
               </div>
-              <div className="font-[var(--font-label-caps)] text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">
+              <div className="font-[var(--font-label-caps)] text-xs lg:text-sm text-on-surface/70 tracking-widest uppercase">
                 {x.label}
               </div>
             </div>
diff --git a/app/components/home/VisionSection.tsx b/app/components/home/VisionSection.tsx
index 7dafd97..9154f86 100644
--- a/app/components/home/VisionSection.tsx
+++ b/app/components/home/VisionSection.tsx
@@ -9,16 +9,16 @@ export default function VisionSection({
   };
 }) {
   return (
-    <section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]">
+    <section className="py-16 lg:py-24 max-w-hd mx-auto px-[var(--spacing-gutter)]">
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-32 items-start">
         <div className="lg:col-span-5">
           <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary mb-6 lg:mb-10 block tracking-[0.25em]">
             {data.eyebrow}
           </span>
-          <h2 className="font-[var(--font-display-lg)] text-on-surface mb-8 lg:mb-12 leading-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
+          <h2 className="font-[var(--font-display-lg)] text-on-surface mb-8 lg:mb-12 leading-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)]">
             {data.title}
           </h2>
-          <div className="space-y-6 lg:space-y-10 text-on-surface-variant text-lg lg:text-[22px] leading-relaxed">
+          <div className="space-y-6 lg:space-y-8 text-on-surface-variant text-base lg:text-[18px] leading-relaxed">
             {data.paragraphs.map((p) => (
               <p key={p}>{p}</p>
             ))}
@@ -28,15 +28,15 @@ export default function VisionSection({
           {data.cards.map((c) => (
             <div
               key={c.title}
-              className="glass-panel p-8 lg:p-12 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-4 hover:shadow-2xl hover:shadow-primary/5"
+              className="glass-panel p-6 lg:p-10 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-4 hover:shadow-2xl hover:shadow-primary/5"
             >
-              <span className="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block">
+              <span className="material-symbols-outlined text-primary text-[32px] lg:text-[48px] mb-6 lg:mb-8 block">
                 {c.icon}
               </span>
-              <h3 className="font-[var(--font-display-lg)] text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">
+              <h3 className="font-[var(--font-display-lg)] text-lg lg:text-[22px] text-on-surface mb-3 lg:mb-4">
                 {c.title}
               </h3>
-              <p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">
+              <p className="text-xs lg:text-[16px] text-on-surface-variant/80 leading-relaxed">
                 {c.description}
               </p>
             </div>
diff --git a/app/components/layout/Footer/Footer.tsx b/app/components/layout/Footer/Footer.tsx
index 32e706a..30a9edc 100644
--- a/app/components/layout/Footer/Footer.tsx
+++ b/app/components/layout/Footer/Footer.tsx
@@ -3,9 +3,9 @@ import siteData from "@/app/data/site.json";
 
 export default function Footer() {
   return (
-    <footer className="w-full bg-surface-container-low border-t border-white/5 py-6 lg:py-10">
-      <div className="flex flex-col xl:flex-row justify-between items-center px-[var(--spacing-gutter)] gap-6 lg:gap-8 w-full max-w-hd mx-auto">
-        <div className="font-[var(--font-label-caps)] text-base lg:text-[18px] text-primary tracking-[0.4em] font-bold uppercase">
+    <footer className="w-full bg-surface-container-low border-t border-white/5 py-10 lg:py-16">
+      <div className="flex flex-col lg:flex-row justify-between items-center px-[var(--spacing-gutter)] gap-10 lg:gap-8 w-full max-w-hd mx-auto">
+        <div className="font-[var(--font-label-caps)] text-base lg:text-xl text-primary tracking-widest font-bold uppercase">
           {siteData.brand.name}
         </div>
         <div className="flex flex-wrap justify-center gap-8 lg:gap-16">
@@ -19,7 +19,7 @@ export default function Footer() {
             </Link>
           ))}
         </div>
-        <div className="text-[13px] lg:text-[14px] text-on-surface-variant/40 text-center xl:text-right max-w-sm leading-relaxed uppercase tracking-widest">
+        <div className="text-[13px] lg:text-[14px] text-on-surface-variant/40 text-center lg:text-right max-w-sm leading-relaxed uppercase tracking-widest">
           {siteData.footer.copyright}
         </div>
       </div>
diff --git a/app/components/layout/Header/HeaderClient.tsx b/app/components/layout/Header/HeaderClient.tsx
index c9e4679..454257e 100644
--- a/app/components/layout/Header/HeaderClient.tsx
+++ b/app/components/layout/Header/HeaderClient.tsx
@@ -28,94 +28,131 @@ export default function HeaderClient({
   }, [mobileOpen]);
 
   return (
-    <header className="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5">
-      <div className="flex justify-between items-center px-[var(--spacing-gutter)] py-2 lg:py-3 w-full max-w-hd mx-auto">
-        <Link
-          href="/"
-          className="font-[var(--font-display-lg)] text-[18px] sm:text-[20px] lg:text-[24px] text-primary tracking-tighter uppercase font-bold"
-        >
-          {brand.name}
-        </Link>
-
-        <nav className="hidden xl:flex items-center gap-10 2xl:gap-16">
+    <>
+      <header className="fixed top-0 w-full z-50 bg-surface/90 backdrop-blur-xl border-b border-white/10 shadow-2xl">
+        <div className="flex justify-between items-center px-[var(--spacing-gutter)] py-4 lg:py-6 w-full max-w-hd mx-auto">
           <Link
-            className={`font-[var(--font-label-caps)] text-sm ${
-              isHome ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
-            } transition-colors duration-300`}
             href="/"
+            className="font-[var(--font-display-lg)] text-[16px] sm:text-[18px] lg:text-[22px] text-primary tracking-tighter uppercase font-bold"
           >
-            Home
+            {brand.name}
           </Link>
-          {navItems.map((item) => {
-            const active = pathname === item.href;
-            return (
-              <Link
-                key={item.href}
-                className={`font-[var(--font-label-caps)] text-sm transition-colors duration-300 ${
-                  active ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
-                }`}
-                href={item.href}
-              >
-                {item.label}
-              </Link>
-            );
-          })}
-        </nav>
 
-        <div className="flex items-center gap-4 lg:gap-10">
-          <span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
-            EN
-          </span>
-          <Link
-            href="/registration"
-            className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-5 lg:px-7 py-2 lg:py-2.5 font-[var(--font-body-base)] text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
-          >
-            Register
-          </Link>
-          <button
-            type="button"
-            className="xl:hidden text-primary p-2"
-            aria-label="Toggle menu"
-            aria-expanded={mobileOpen}
-            onClick={() => setMobileOpen((v) => !v)}
-          >
-            <span className="material-symbols-outlined text-3xl">{mobileOpen ? "close" : "menu"}</span>
-          </button>
+          <nav className="hidden lg:flex items-center gap-8 2xl:gap-12">
+            <Link
+              className={`font-[var(--font-label-caps)] text-sm ${
+                isHome ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
+              } transition-colors duration-300`}
+              href="/"
+            >
+              Home
+            </Link>
+            {navItems.map((item) => {
+              const active = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  className={`font-[var(--font-label-caps)] text-sm transition-colors duration-300 ${
+                    active ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
+                  }`}
+                  href={item.href}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+
+          <div className="flex items-center gap-4 lg:gap-10">
+            <span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
+              EN
+            </span>
+            <Link
+              href="/registration"
+              className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-4 lg:px-6 py-2 lg:py-2.5 font-[var(--font-body-base)] text-xs lg:text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
+            >
+              Register
+            </Link>
+            <button
+              type="button"
+              className="lg:hidden text-primary p-2"
+              aria-label="Toggle menu"
+              aria-expanded={mobileOpen}
+              onClick={() => setMobileOpen((v) => !v)}
+            >
+              <span className="material-symbols-outlined text-3xl">{mobileOpen ? "close" : "menu"}</span>
+            </button>
+          </div>
         </div>
-      </div>
+      </header>
 
+      {/* Mobile Menu Overlay */}
       <div
-        className={`fixed inset-0 top-[52px] lg:top-[60px] bg-surface z-40 flex-col p-[var(--spacing-gutter)] gap-8 xl:hidden border-t border-white/5 ${
-          mobileOpen ? "flex" : "hidden"
+        className={`fixed inset-0 bg-black/80 backdrop-blur-md z-[60] transition-opacity duration-500 lg:hidden ${
+          mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+        }`}
+        onClick={() => setMobileOpen(false)}
+      />
+
+      {/* Mobile Menu Side Drawer */}
+      <div
+        className={`fixed inset-y-0 right-0 w-[80%] sm:w-[380px] z-[70] flex flex-col bg-[#1a1a1a] shadow-[-20px_0_60px_rgba(0,0,0,1)] transition-transform duration-500 ease-out lg:hidden ${
+          mobileOpen ? "translate-x-0" : "translate-x-full"
         }`}
       >
-        <Link className="text-2xl font-[var(--font-display-lg)] text-on-surface" href="/" onClick={() => setMobileOpen(false)}>
-          Home
-        </Link>
-        {navItems.map((item) => {
-          const active = pathname === item.href;
-          return (
-            <Link
-              key={item.href}
-              className={`text-2xl font-[var(--font-display-lg)] ${active ? "text-primary" : "text-on-surface"}`}
-              href={item.href}
-              onClick={() => setMobileOpen(false)}
-            >
-              {item.label}
-            </Link>
-          );
-        })}
-        <div className="mt-auto flex flex-col gap-6">
-          <div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm">Language: EN</div>
-          <Link
-            href="/registration"
-            className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-wider rounded-lg text-center"
+        <div className="p-8 flex justify-between items-center border-b border-white/5 bg-[#222222]">
+          <span className="font-[var(--font-display-lg)] text-primary text-sm font-bold uppercase tracking-widest">
+            Menu
+          </span>
+          <button
+            type="button"
+            className="text-primary/70 hover:text-primary transition-colors"
             onClick={() => setMobileOpen(false)}
           >
-            Register Now
-          </Link>
+            <span className="material-symbols-outlined text-4xl">close</span>
+          </button>
+        </div>
+
+        <div className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto">
+          <nav className="flex flex-col gap-6">
+            <Link
+              className={`text-xl font-[var(--font-display-lg)] ${isHome ? "text-primary" : "text-on-surface"} hover:text-primary transition-colors`}
+              href="/"
+              onClick={() => setMobileOpen(false)}
+            >
+              Home
+            </Link>
+            {navItems.map((item) => {
+              const active = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  className={`text-xl font-[var(--font-display-lg)] transition-colors ${
+                    active ? "text-primary" : "text-on-surface hover:text-primary"
+                  }`}
+                  href={item.href}
+                  onClick={() => setMobileOpen(false)}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+
+          <div className="mt-auto pt-10 border-t border-white/5 flex flex-col gap-6">
+            <div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm uppercase tracking-widest">
+              Language: EN
+            </div>
+            <Link
+              href="/registration"
+              className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-widest rounded-xl text-center shadow-2xl"
+              onClick={() => setMobileOpen(false)}
+            >
+              Register Now
+            </Link>
+          </div>
         </div>
       </div>
-    </header>
+    </>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index c9e5a0e..4ed078e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -22,7 +22,7 @@
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     "Courier New", monospace;
 
-  --spacing-gutter: clamp(1rem, 4vw, 3.75rem);
+  --spacing-gutter: clamp(1.25rem, 5vw, 5rem);
   --spacing-container-max: 1800px;
 }