Better mobile layout for projects

src/app/sections/projects/description-reveal.tsx

@@ -33,7 +33,7 @@ export const DescriptionReveal = ({ text, localProgress, anchors }: DescriptionR
   return (
     <m.p
       style={{ opacity, y, filter }}
-      className="max-w-xl font-body desktop:text-lg text-base text-foreground/70 leading-relaxed"
+      className="max-w-xl font-body desktop:text-lg text-[clamp(0.8rem,3.6vw,1rem)] text-foreground/70 leading-relaxed"
     >
       {text}
     </m.p>

src/app/sections/projects/hook-reveal.tsx

@@ -30,7 +30,7 @@ export const HookReveal = ({ text, localProgress, anchors }: HookRevealProps) =>
   const { tokens, wordCount } = tokenize(text);
 
   return (
-    <h3 className="font-heading font-semibold desktop:text-5xl text-4xl leading-[1.1] lg:text-6xl">
+    <h3 className="font-heading font-semibold desktop:text-5xl text-[clamp(1.25rem,6vw,2.25rem)] leading-[1.1] lg:text-6xl">
       {tokens.map((token, i) => {
         if (token.kind === "space") {
           // biome-ignore lint/suspicious/noArrayIndexKey: token positions are stable for a given hook string

src/app/sections/projects/links-row.tsx

@@ -67,7 +67,7 @@ export const LinksRow = ({ project, localProgress, sideSign, anchors }: LinksRow
   if (items.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-x-6 gap-y-3 pt-4">
+    <div className="flex flex-wrap items-center gap-x-6 gap-y-3 desktop:pt-4 pt-2">
       {items.map((item, i) => (
         <LinkWrapper
           key={item.key}

src/app/sections/projects/project-layer.tsx

@@ -56,11 +56,15 @@ export const ProjectLayer = ({
     <m.div
       style={layerStyle}
       data-project-layer
-      className="absolute inset-0 flex items-center desktop:px-16 px-8 lg:px-24"
+      className="absolute inset-0 flex desktop:items-center desktop:px-16 px-8 lg:px-24"
     >
-      <div className="mx-auto grid w-full max-w-7xl desktop:grid-cols-2 grid-cols-1 items-center desktop:gap-12 gap-10 lg:gap-20">
-        <div className={visualOnLeft ? "desktop:order-2" : "desktop:order-1"}>
-          <div className="space-y-6">
+      <div className="mx-auto flex desktop:grid w-full max-w-7xl desktop:grid-cols-2 flex-col desktop:items-center desktop:gap-12 lg:gap-20">
+        <div
+          className={`desktop:block flex desktop:h-auto h-[62svh] items-center ${
+            visualOnLeft ? "desktop:order-2" : "desktop:order-1"
+          }`}
+        >
+          <div className="w-full desktop:space-y-6 space-y-4">
             <Placard index={index} total={total} localProgress={localProgress} anchors={anchors} />
             <HookReveal text={project.hook} localProgress={localProgress} anchors={anchors} />
             <DescriptionReveal
@@ -82,7 +86,11 @@ export const ProjectLayer = ({
           </div>
         </div>
 
-        <div className={visualOnLeft ? "desktop:order-1" : "desktop:order-2"}>
+        <div
+          className={`desktop:block flex desktop:h-auto h-[38svh] items-center justify-center ${
+            visualOnLeft ? "desktop:order-1" : "desktop:order-2"
+          }`}
+        >
           <VisualShowcase
             media={project.media}
             localProgress={localProgress}