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

---
 app/components/ContentLockup.js | 8 ++++----
 app/learn/page.js               | 5 +++--
 app/tailwind.css                | 1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index add5061..c425059 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -50,16 +50,16 @@ 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)] sm:pt-[var(--spacing-scale-040)] sm:pb-0 md:pt-[var(--spacing-scale-056)] md:px-[var(--spacing-scale-032)]",
+        "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)] lg:pt-[var(--spacing-scale-056)] lg:px-[var(--spacing-scale-064)]",
       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)]",
+        "flex flex-col gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-008)]",
       titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",
       title:
-        "font-bricolage-grotesque font-medium text-[28px] leading-[36px] tracking-[0] md:text-[44px] md:leading-[110%] text-[var(--color-content-default-primary)]",
+        "font-bricolage-grotesque font-medium text-[28px] leading-[36px] tracking-[0] md:text-[44px] md:leading-[110%] lg:text-[52px] text-[var(--color-content-default-primary)]",
       subtitle:
-        "font-space-grotesk font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-primary)]",
+        "font-space-grotesk font-normal text-[16px] leading-[24px] tracking-[0] lg:text-[24px] lg:leading-[28px] text-[var(--color-content-default-primary)]",
       description:
         "font-inter font-normal text-[16px] leading-[140%] lg:text-[18px] lg:leading-[150%] xl:text-[20px] xl:leading-[160%] text-[var(--color-content-secondary)]",
       shape:
diff --git a/app/learn/page.js b/app/learn/page.js
index 1ea8ad0..f2958a8 100644
--- a/app/learn/page.js
+++ b/app/learn/page.js
@@ -44,8 +44,8 @@ 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 lg:grid-cols-3 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-012)] 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) => {
+      <div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)]">
+        {Array.from({ length: 16 }).map((_, i) => {
           const post = allPosts[i % allPosts.length];
           return (
             <ContentThumbnailTemplate
@@ -54,6 +54,7 @@ export default function LearnPage() {
               }`}
               post={post}
               variant="vertical"
+              className={i >= 6 ? "hidden lg2:block" : ""}
             />
           );
         })}
diff --git a/app/tailwind.css b/app/tailwind.css
index 81846dc..9c7c88e 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -24,6 +24,7 @@
   --breakpoint-md: 640px;
   --breakpoint-xmd: 768px;
   --breakpoint-lg: 1024px;
+  --breakpoint-lg2: 1150px;
   --breakpoint-xl: 1440px;
 
   /* Reset Tailwind color defaults to avoid collisions */