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

---
 app/learn/page.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/learn/page.js b/app/learn/page.js
index f2958a8..38fb507 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 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)]">
+      <div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 xl:grid-cols-5 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)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[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)] 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 (
@@ -54,7 +54,9 @@ export default function LearnPage() {
               }`}
               post={post}
               variant="vertical"
-              className={i >= 6 ? "hidden lg2:block" : ""}
+              className={`${i >= 6 ? "hidden lg2:block" : ""} ${
+                i >= 10 ? "xl:hidden" : ""
+              }`}
             />
           );
         })}