Learn page smd breakpoint

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>
   );