From dfca76a32066033bf6163608d0d31a2061fd9939 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 30 Sep 2025 09:17:09 -0600
Subject: [PATCH] Learn page md breakpoint

---
 app/components/ContentLockup.js | 10 ++++++----
 app/learn/page.js               |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index dfffe89..add5061 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -50,12 +50,14 @@ const ContentLockup = ({
     },
     learn: {
       container:
-        "flex flex-col gap-[var(--spacing-scale-012)] relative z-10 pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)]",
-      textContainer: "flex flex-col gap-[var(--spacing-scale-012)]",
-      titleGroup: "flex flex-col gap-[var(--spacing-scale-012)]",
+        "flex flex-col gap-[var(--spacing-scale-012)] relative z-10 pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-040)] sm:pb-0 md:pt-[var(--spacing-scale-056)] md:px-[var(--spacing-scale-032)]",
+      textContainer:
+        "flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)]",
+      titleGroup:
+        "flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)]",
       titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
       title:
-        "font-bricolage-grotesque font-medium text-[28px] leading-[36px] tracking-[0] text-[var(--color-content-default-primary)]",
+        "font-bricolage-grotesque font-medium text-[28px] leading-[36px] tracking-[0] md:text-[44px] md:leading-[110%] text-[var(--color-content-default-primary)]",
       subtitle:
         "font-space-grotesk font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-primary)]",
       description:
diff --git a/app/learn/page.js b/app/learn/page.js
index f03c63c..05db554 100644
--- a/app/learn/page.js
+++ b/app/learn/page.js
@@ -44,7 +44,7 @@ export default function LearnPage() {
       </div>
 
       {/* smd and up: 2x3 grid of vertical thumbnails, repeat posts as needed */}
-      <div className="hidden smd:grid smd:grid-cols-2 smd:gap-x-[var(--spacing-scale-008)] smd:gap-y-[var(--spacing-scale-008)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)]">
+      <div className="hidden smd:grid smd:grid-cols-2 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)]">
         {Array.from({ length: 6 }).map((_, i) => {
           const post = allPosts[i % allPosts.length];
           return (