diff --git a/app/components/ProductSpotlight.tsx b/app/components/ProductSpotlight.tsx
index 41acf8a..d77965b 100644
--- a/app/components/ProductSpotlight.tsx
+++ b/app/components/ProductSpotlight.tsx
@@ -43,13 +43,21 @@ export async function ProductSpotlight() {
     // section instead of navigating to /shop whenever exactly 1 product is
     // active (see Navbar.tsx/layout.tsx).
     <section id="spotlight" className="w-full bg-bg-base py-12 sm:py-16 px-[var(--layout-padding-x)]">
-      <Reveal className="max-w-[75rem] mx-auto rounded-md flex flex-col sm:flex-row gap-8 sm:gap-12 items-center p-6 sm:p-10">
-        <div className="group relative w-full sm:w-[23.75rem] sm:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
+      {/* Row layout only from lg (1024px) up — sm:flex-row used to kick in
+          at 640px, but a 380px-wide image + text squeezed into the rest of
+          a tablet-width viewport (768-1023px) read as cramped/too wide.
+          Tablet now stays stacked like mobile, but max-w-[32rem] between sm
+          and lg keeps that stacked card centered and narrower than the
+          tablet viewport instead of stretching to fill it — true mobile
+          (below sm) stays unconstrained since the viewport itself is
+          already narrow there. */}
+      <Reveal className="max-w-[75rem] sm:max-w-[32rem] lg:max-w-[75rem] mx-auto rounded-md flex flex-col lg:flex-row gap-8 lg:gap-12 items-center p-6 sm:p-10">
+        <div className="group relative w-full lg:w-[23.75rem] lg:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
           <Image
             src={image}
             alt={product.name}
             fill
-            sizes="(min-width: 640px) 380px, 100vw"
+            sizes="(min-width: 1024px) 380px, (min-width: 640px) 512px, 100vw"
             className="object-cover transition-transform duration-500 group-hover:scale-105"
           />
           {fullyOutOfStock ? (