From f85a78bbb2ddbfdaebd3d67e24b6bcb6d1dbf966 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Thu, 11 Jun 2026 18:51:18 +0900
Subject: [PATCH] fix(web): keep basecamp how-it-works mobile layout below
 1024px

---
 .../basecamp/_sections/how-it-works-section.tsx        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/sections/basecamp/_sections/how-it-works-section.tsx b/apps/web/components/sections/basecamp/_sections/how-it-works-section.tsx
index a3d1adcefd..2aa2433ab8 100644
--- a/apps/web/components/sections/basecamp/_sections/how-it-works-section.tsx
+++ b/apps/web/components/sections/basecamp/_sections/how-it-works-section.tsx
@@ -12,8 +12,8 @@ export function HowItWorksSection({ data }: { data: TableSection }) {
   ].filter((cta): cta is CTA => Boolean(cta))
 
   return (
-    <section className="grid w-full gap-6 px-3 py-10 md:grid-cols-2 md:pt-0 md:pb-10">
-      <div className="flex flex-col gap-6 md:min-h-[321px] lg:min-h-[435px] xl:min-h-[549px] desktop:min-h-[621px] md:justify-between md:gap-8">
+    <section className="grid w-full gap-6 px-3 py-10 lg:grid-cols-2 lg:pt-0 lg:pb-10">
+      <div className="flex flex-col gap-6 lg:min-h-[435px] xl:min-h-[549px] desktop:min-h-[621px] lg:justify-between lg:gap-8">
         <div>
           <h2 className="text-h3-sans mb-[14px] text-brand-dark-green">
             {data.title}
@@ -22,7 +22,7 @@ export function HowItWorksSection({ data }: { data: TableSection }) {
             {data.rows.map((row) => (
               <article
                 key={row.number}
-                className="grid gap-4 pt-[6px] pb-3 md:grid-cols-2 md:gap-3"
+                className="grid gap-4 pt-[6px] pb-3 lg:grid-cols-2 lg:gap-3"
               >
                 <span className="text-eyebrow text-brand-dark-green">
                   {row.number}
@@ -50,13 +50,13 @@ export function HowItWorksSection({ data }: { data: TableSection }) {
           </div>
         ) : null}
       </div>
-      <div className="relative aspect-[351/313] md:aspect-auto md:h-[321px] lg:h-[435px] xl:h-[549px] desktop:h-[621px] overflow-hidden rounded-xl">
+      <div className="relative aspect-[351/313] lg:aspect-auto lg:h-[435px] xl:h-[549px] desktop:h-[621px] overflow-hidden rounded-xl">
         <Image
           src="/images/home/figma-refresh/basecamp.webp"
           alt=""
           fill
           priority
-          sizes="(max-width: 768px) calc(100vw - 24px), (max-width: 1440px) calc(50vw - 24px), 696px"
+          sizes="(max-width: 1024px) calc(100vw - 24px), (max-width: 1440px) calc(50vw - 24px), 696px"
           className="object-cover object-[16%_top]"
         />
       </div>