diff --git a/fix_grid.js b/fix_grid.js
new file mode 100644
index 0000000..cef1a1a
--- /dev/null
+++ b/fix_grid.js
@@ -0,0 +1,31 @@
+const fs = require('fs');
+const file = 'src/components/SpatialSanctuary.tsx';
+let content = fs.readFileSync(file, 'utf8');
+
+// Fix cream/dark green cards padding
+content = content.replace(/rounded-2xl shadow-sm p-6 flex flex-col/g, 'rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col');
+
+// Fix intro card 4, 6, 9, 10, 12 small subtitle
+content = content.replace(/<span className="font-sans text-sm tracking-\[0.25em\] uppercase text-\[\#bc9e65\] font-bold block mb-1">/g, '<span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">');
+content = content.replace(/<span className="font-sans text-sm sm:text-sm tracking-\[0.25em\] uppercase text-\[\#bc9e65\] font-bold block mb-1">/g, '<span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">');
+
+// Fix intro card 4, 6, 9, 10, 12 title
+content = content.replace(/<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-\[\#0a4a2b\] uppercase mb-2">/g, '<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">');
+content = content.replace(/<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-white uppercase mb-2">/g, '<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">');
+
+// Fix intro card 4, 6, 9, 10, 12 desc
+content = content.replace(/<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">/g, '<p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">');
+content = content.replace(/<p className="font-sans text-base sm:text-base text-\[\#e4d7bc\] leading-relaxed">/g, '<p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">');
+
+// Fix image cards padding
+content = content.replace(/<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black\/90 via-black\/60 to-transparent p-4 z-20">/g, '<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">');
+
+// Fix image cards subtitle
+content = content.replace(/<span className="font-sans text-sm tracking-\[0.15em\] text-\[\#bc9e65\] font-bold uppercase block mb-0.5">/g, '<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">');
+
+// Fix image cards title
+content = content.replace(/<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">/g, '<h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">');
+
+// Write back
+fs.writeFileSync(file, content);
+console.log('Fixed cards formatting');
diff --git a/src/components/ChefShowcase.tsx b/src/components/ChefShowcase.tsx
index bc6efc1..d30ba78 100644
--- a/src/components/ChefShowcase.tsx
+++ b/src/components/ChefShowcase.tsx
@@ -314,7 +314,7 @@ export default function ChefShowcase() {
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, ease: "easeOut" }}
-            className="lg:col-span-7 flex justify-end"
+            className="lg:col-span-7 flex justify-end mb-24 lg:mb-0"
           >
             <div className="w-full max-w-[620px] relative bg-[#fdfcf7]/95 border border-[#d8c396]/55 rounded-none p-5 sm:p-8 min-h-[160px] shadow-[0_15px_30px_rgba(0,0,0,0.5)] flex flex-col justify-center overflow-visible select-text text-left">
 
@@ -329,23 +329,23 @@ export default function ChefShowcase() {
 
               {/* Text content details */}
               <div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]">
-                <span className="font-sans text-sm sm:text-base tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
                   — THE ESSENCE OF —
                 </span>
 
-                <h4 className="font-serif text-lg sm:text-lg font-bold text-[#a83232] tracking-wider uppercase mb-1">
+                <h4 className="font-serif text-base sm:text-lg font-bold text-[#a83232] tracking-wider uppercase mb-1">
                   Heritage Spices
                 </h4>
 
-                <p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed max-w-[85%]">
+                <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed max-w-[95%] sm:max-w-[85%]">
                   Handpicked spices from the best regions of India, blended with time-honored techniques to create unforgettable flavors.
                 </p>
 
                 {/* Explorer Button */}
-                <div className="mt-3 select-none">
+                <div className="mt-3 sm:mt-4 select-none">
                   <a
                     href="#menu"
-                    className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-base font-sans font-bold text-[#fcfaf2] tracking-[0.15em] uppercase hover:bg-[#0c5030] hover:border-[#bc9e65] transition-all duration-300 shadow-md"
+                    className="inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-[10px] sm:text-base font-sans font-bold text-[#fcfaf2] tracking-[0.1em] sm:tracking-[0.15em] uppercase hover:bg-[#0c5030] hover:border-[#bc9e65] transition-all duration-300 shadow-md whitespace-nowrap w-fit"
                   >
                     Explore Our Menu →
                   </a>
diff --git a/src/components/MenuPreview.tsx b/src/components/MenuPreview.tsx
index 8d8372e..2f2084d 100644
--- a/src/components/MenuPreview.tsx
+++ b/src/components/MenuPreview.tsx
@@ -237,7 +237,7 @@ export default function MenuPreview() {
     <section
       ref={sectionRef}
       id="menu"
-      className="relative min-h-screen py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none"
+      className="relative min-h-screen py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none bg-[#fbfaf5]"
     >
       {/* Traditional Background Image containing pre-composed sketches, leaves, and brass pots */}
       <Image
@@ -245,7 +245,7 @@ export default function MenuPreview() {
         alt="Traditional South Indian Menu Background"
         fill
         priority
-        className="object-fill pointer-events-none select-none z-0"
+        className="object-cover object-center pointer-events-none select-none z-0 opacity-80"
       />
 
       {/* Traditional Temple Borders */}
diff --git a/src/components/SpatialSanctuary.tsx b/src/components/SpatialSanctuary.tsx
index b281789..8cbb892 100644
--- a/src/components/SpatialSanctuary.tsx
+++ b/src/components/SpatialSanctuary.tsx
@@ -235,21 +235,21 @@ export default function SpatialSanctuary() {
           <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-35 z-10" />
 
           {/* Grid Layout Container */}
-          <div className="grid grid-rows-2 auto-cols-[220px] sm:auto-cols-[250px] md:auto-cols-[270px] grid-flow-col gap-6 h-[75vh] max-h-[680px] w-max relative z-10 pr-24">
+          <div className="grid grid-rows-2 auto-cols-[200px] sm:auto-cols-[250px] md:auto-cols-[270px] grid-flow-col gap-4 sm:gap-6 h-[65vh] sm:h-[75vh] max-h-[680px] w-max relative z-10 pr-24">
 
             {/* Card 1: Row 1, Col 1 - Cream Intro Card */}
-            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
+            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-5 flex flex-col justify-center select-text relative">
               <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
-              <span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                 — The Masterpieces —
               </span>
-              <h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
+              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                 Culinary Art
               </h3>
-              <p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">
+              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                 Every category is a chapter of South Indian gastronomy, curated to showcase heritage and flavor.
               </p>
-              <div className="flex items-center gap-1.5 mt-3 text-[#bc9e65]">
+              <div className="flex items-center gap-1.5 mt-2 sm:mt-3 text-[#bc9e65]">
                 <span className="font-sans text-sm tracking-[0.15em] font-bold uppercase">Slide to explore</span>
                 <svg className="w-3 h-3 animate-pulse" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                   <path d="M9 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
@@ -266,11 +266,11 @@ export default function SpatialSanctuary() {
                 sizes="240px"
                 className="gallery-img object-cover transition-all duration-[1s]"
               />
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
-                <span className="font-sans text-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                   Breakfast Classics
                 </span>
-                <h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
+                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                   Crispy Ghee Roasts
                 </h4>
               </div>
@@ -281,26 +281,26 @@ export default function SpatialSanctuary() {
             <div className="row-span-1 col-span-2 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-md flex flex-col sm:flex-row overflow-hidden relative group">
               <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl z-20" />
               {/* Left text section */}
-              <div className="w-full sm:w-[50%] p-5 sm:p-7 flex flex-col justify-center select-text relative z-10">
-                <span className="font-sans text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <div className="w-full sm:w-[50%] p-4 sm:p-7 flex flex-col justify-center select-text relative z-10">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                   — Heirloom Platter —
                 </span>
-                <h3 className="font-serif text-lg sm:text-lg md:text-xl font-bold tracking-wider text-white uppercase mb-2">
+                <h3 className="font-serif text-base sm:text-lg md:text-xl font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
                   Royal Feast
                 </h3>
-                <p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed">
+                <p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">
                   Experience the grand Chola Samrat Thali, bringing twenty hand-turned heirloom dishes together on a banana leaf.
                 </p>
-                <div className="flex items-center gap-2 mt-3 text-[#bc9e65]">
+                <div className="flex items-center gap-2 mt-2 sm:mt-3 text-[#bc9e65]">
                   <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                     <circle cx="12" cy="12" r="10" />
                     <path d="M8 12a4 4 0 108 0" strokeLinecap="round" />
                   </svg>
-                  <span className="font-serif text-sm sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span>
+                  <span className="font-serif text-xs sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span>
                 </div>
               </div>
               {/* Right image section */}
-              <div className="w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden">
+              <div className="hidden sm:block w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden">
                 <Image
                   src="/images/home/culinary-heritage/cards/royal-feast.webp"
                   alt="Royal Feast Thali"
@@ -313,15 +313,15 @@ export default function SpatialSanctuary() {
             </div>
 
             {/* Card 4: Row 2, Col 2 - Rooted in Tradition Cream Card */}
-            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-6 flex flex-col justify-center select-text relative">
+            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
               <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
-              <span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                 — The Foundation —
               </span>
-              <h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
+              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                 Stone Batter
               </h3>
-              <p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">
+              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                 Batter fermented for 12 hours, stone-ground daily to achieve the perfect crispness and tang.
               </p>
             </div>
@@ -335,11 +335,11 @@ export default function SpatialSanctuary() {
                 sizes="240px"
                 className="gallery-img object-cover transition-all duration-[1s]"
               />
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
-                <span className="font-sans text-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                   Imperial Platter
                 </span>
-                <h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
+                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                   20 Heirloom Delicacies
                 </h4>
               </div>
@@ -347,15 +347,15 @@ export default function SpatialSanctuary() {
             </div>
 
             {/* Card 6: Row 1, Col 4 - Dark Green Madras Filter Coffee Card */}
-            <div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-6 flex flex-col justify-center select-text relative">
+            <div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
               <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
-              <span className="font-sans text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                 — A Sip of Tradition —
               </span>
-              <h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-white uppercase mb-2">
+              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
                 Filter Coffee
               </h3>
-              <p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed">
+              <p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">
                 Strong, aromatic brew of premium chicory-coffee, hand-frothed in traditional brass tumblers.
               </p>
               <div className="flex items-center gap-2 mt-3 text-[#bc9e65]">
@@ -375,11 +375,11 @@ export default function SpatialSanctuary() {
                 sizes="240px"
                 className="gallery-img object-cover transition-all duration-[1s]"
               />
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
-                <span className="font-sans text-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                   Dosa Court
                 </span>
-                <h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
+                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                   A2 Ghee Roast
                 </h4>
               </div>
@@ -395,11 +395,11 @@ export default function SpatialSanctuary() {
                 sizes="240px"
                 className="gallery-img object-cover transition-all duration-[1s]"
               />
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
-                <span className="font-sans text-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                   Chef's Specials
                 </span>
-                <h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
+                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                   Seasonal Creations
                 </h4>
               </div>
@@ -407,29 +407,29 @@ export default function SpatialSanctuary() {
             </div>
 
             {/* Card 9: Row 2, Col 5 - Pure Ingredients Cream Card */}
-            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-6 flex flex-col justify-center select-text relative">
+            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
               <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
-              <span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                 — Purity Checked —
               </span>
-              <h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
+              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                 Pure A2 Ghee
               </h3>
-              <p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">
+              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                 Enriched with hand-churned A2 cow ghee and cold-pressed coconut oil.
               </p>
             </div>
 
             {/* Card 10: Row 1, Col 6 - Traditional Spices Cream Card */}
-            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-6 flex flex-col justify-center select-text relative">
+            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
               <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
-              <span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                 — Aromatic Notes —
               </span>
-              <h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
+              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                 Organic Spices
               </h3>
-              <p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">
+              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                 Hand-selected black pepper, cardamom, turmeric, and dry chilies sourced from local hills.
               </p>
             </div>
@@ -443,11 +443,11 @@ export default function SpatialSanctuary() {
                 sizes="240px"
                 className="gallery-img object-cover transition-all duration-[1s]"
               />
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
-                <span className="font-sans text-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                   Curry Court
                 </span>
-                <h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
+                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                   Smoked Clay Pots
                 </h4>
               </div>
@@ -455,15 +455,15 @@ export default function SpatialSanctuary() {
             </div>
 
             {/* Card 12: Row 1, Col 7 - Sweet Delights Dark Green Card */}
-            <div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-6 flex flex-col justify-center select-text relative">
+            <div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
               <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
-              <span className="font-sans text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
+              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                 — Nectars of the South —
               </span>
-              <h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-white uppercase mb-2">
+              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
                 Sweet Delights
               </h3>
-              <p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed">
+              <p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">
                 End your feast with traditional payasam, cardamomy kesari, and coconut sweets.
               </p>
             </div>
@@ -477,11 +477,11 @@ export default function SpatialSanctuary() {
                 sizes="240px"
                 className="gallery-img object-cover transition-all duration-[1s]"
               />
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
-                <span className="font-sans text-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
+              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
+                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                   Traditional Drinks
                 </span>
-                <h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
+                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                   Froth Brews & Nectars
                 </h4>
               </div>