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

---
 app/components/ContentThumbnailTemplate.js |  6 +++---
 app/learn/page.js                          | 19 ++++++++++++++++++-
 app/tailwind.css                           |  2 +-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/components/ContentThumbnailTemplate.js b/app/components/ContentThumbnailTemplate.js
index 972a863..3e7acfb 100644
--- a/app/components/ContentThumbnailTemplate.js
+++ b/app/components/ContentThumbnailTemplate.js
@@ -46,14 +46,14 @@ const ContentThumbnailTemplate = ({
         href={`/blog/${post.slug}`}
         className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
       >
-        <div className="relative w-[260px] h-[390px] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
-          {/* Background SVG - sized to fit the 260x390 container exactly */}
+        <div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
+          {/* Background SVG - fills container with maintained aspect */}
           <div className="absolute inset-0 z-0">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={backgroundImage}
               alt={`Background for ${post.frontmatter.title}`}
-              className="w-[260px] h-[390px] object-cover"
+              className="w-full h-full object-cover"
             />
             {/* Gradient overlay for better text readability */}
             <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
diff --git a/app/learn/page.js b/app/learn/page.js
index 1c0eb05..f03c63c 100644
--- a/app/learn/page.js
+++ b/app/learn/page.js
@@ -30,7 +30,8 @@ export default function LearnPage() {
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
       <ContentLockup {...contentLockupData} />
 
-      <div className="pt-[var(--spacing-scale-024)] pb-[var(--spacing-scale-024)] px-[var(--spacing-scale-020)] space-y-[var(--spacing-scale-002)]">
+      {/* Horizontal list (below smd) */}
+      <div className="smd:hidden sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-020)] space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)]">
         {allPosts.slice(0, 3).map((post, index) => (
           <ContentThumbnailTemplate
             key={`${post.slug}-${index}-${
@@ -42,6 +43,22 @@ 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)]">
+        {Array.from({ length: 6 }).map((_, i) => {
+          const post = allPosts[i % allPosts.length];
+          return (
+            <ContentThumbnailTemplate
+              key={`grid-${post.slug}-${i}-${
+                post.frontmatter.thumbnail?.vertical || "default"
+              }`}
+              post={post}
+              variant="vertical"
+            />
+          );
+        })}
+      </div>
+
       <AskOrganizer {...askOrganizerData} />
     </div>
   );
diff --git a/app/tailwind.css b/app/tailwind.css
index 1f790d3..81846dc 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -20,7 +20,7 @@
   --breakpoint-xsm: 429px;
   --breakpoint-sm: 430px;
   --breakpoint-sm2: 440px;
-  --breakpoint-smd: 540px;
+  --breakpoint-smd: 530px;
   --breakpoint-md: 640px;
   --breakpoint-xmd: 768px;
   --breakpoint-lg: 1024px;