Resolving article images

app/components/ContentThumbnailTemplate.js

@@ -24,7 +24,7 @@ const ContentThumbnailTemplate = ({
           : post.frontmatter.thumbnail.horizontal;
 
       if (imageName) {
-        // Return path to image in content/blog directory
+        // Return path to image in public/content/blog directory
         return `/content/blog/${imageName}`;
       }
     }

app/learn/page.js

@@ -30,10 +30,12 @@ export default function LearnPage() {
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
       <ContentLockup {...contentLockupData} />
 
-      <div className="space-y-[var(--spacing-scale-002)]">
+      <div className="pt-[var(--spacing-scale-024)] pb-[var(--spacing-scale-024)] px-[var(--spacing-scale-020)] space-y-[var(--spacing-scale-002)]">
         {allPosts.slice(0, 3).map((post, index) => (
           <ContentThumbnailTemplate
-            key={post.slug}
+            key={`${post.slug}-${index}-${
+              post.frontmatter.thumbnail?.horizontal || "default"
+            }`}
             post={post}
             variant="horizontal"
           />

app/tailwind.css

@@ -20,6 +20,7 @@
   --breakpoint-xsm: 429px;
   --breakpoint-sm: 430px;
   --breakpoint-sm2: 440px;
+  --breakpoint-smd: 540px;
   --breakpoint-md: 640px;
   --breakpoint-xmd: 768px;
   --breakpoint-lg: 1024px;
@@ -29,15 +30,12 @@
   --color-*: initial;
 
   /* Font families */
-  --font-sans:
-    var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-display:
-    var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono:
-    var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono",
-    Consolas, "Liberation Mono", Menlo, monospace;
+  --font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
+    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular,
+    "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
 
   /* Dimension */
   --spacing-scale-000: 0px;