Match the Learn guide grid to the frames, and put the tag and small Rule on the guide card.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(marketing)/learn/page.tsx

@@ -32,6 +32,20 @@ export const metadata: Metadata = routeMetadata("/learn", {
 
 const CASE_STUDY_TILE_RADIUS_CLASS = "rounded-[23.093px]";
 
+/** Figma card grid: 1 column below 640, 2 from 640, 3 from 1024, 4 from 1440. */
+const ARTICLE_GRID_CLASS = [
+  "flex flex-col gap-[var(--space-050)]",
+  "md:flex-row md:flex-wrap md:justify-center md:gap-[var(--space-400)]",
+  "md:px-[var(--space-1200)] md:py-[var(--space-600)]",
+  "lg:px-[var(--space-1800)] lg:pt-[var(--space-800)] lg:pb-[var(--space-1800)]",
+  "[&>*]:min-w-0 [&>*]:w-full",
+  "md:[&>*]:w-[calc((100%-var(--space-400))/2)]",
+  "lg:[&>*]:w-[calc((100%-2*var(--space-400))/3)]",
+  "xl:[&>*]:w-[calc((100%-3*var(--space-400))/4)]",
+].join(" ");
+
+const GUIDE_TAG_SRC = "/content/blog/how-communityrule-works-tag.svg";
+
 const CASE_STUDY_LINK_CLASS = [
   CASE_STUDY_TILE_RADIUS_CLASS,
   "block shrink-0 cursor-pointer outline-none transition-[opacity,transform] duration-200",
@@ -163,14 +177,14 @@ export default function LearnPage() {
 
       <div
         data-testid="learn-article-grid"
-        className="flex flex-col space-y-[var(--space-050)] sm:space-y-[var(--space-200)] sm:px-[var(--space-500)] sm:pt-[var(--space-600)] sm:pb-[var(--space-600)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--space-200)] smd:space-y-0 smd:px-[var(--space-500)] smd:pt-[var(--space-600)] smd:pb-[var(--space-600)] md:gap-[var(--space-400)] md:px-[var(--space-800)] xmd:gap-[var(--space-300)] lg:gap-[var(--space-400)] lg:px-[var(--space-1800)] lg:pt-[var(--space-800)] lg:pb-[var(--space-1800)] lg2:gap-x-[var(--space-400)] lg2:gap-y-[var(--space-600)] xl:gap-x-[var(--space-400)] xl:gap-y-[var(--space-400)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--space-200))/2)] md:[&>*]:w-[calc((100%-var(--space-400))/2)] xmd:[&>*]:w-[calc((100%-2*var(--space-300))/3)] lg:[&>*]:w-[calc((100%-2*var(--space-400))/3)] lg2:[&>*]:w-[calc((100%-3*var(--space-400))/4)] xl:[&>*]:w-[calc((100%-4*var(--space-400))/5)]"
+        className={ARTICLE_GRID_CLASS}
       >
         <ContentThumbnailTemplate
           post={guidePost}
           variant="responsive"
           href={page.guideCard.href}
           showByline={false}
-          showLeadingImage={false}
+          leadingImageSrc={GUIDE_TAG_SRC}
           leadingImageAlt=""
         />
         {articlePosts.map((post) => (