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/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx

@@ -24,6 +24,7 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
     showByline = true,
     showLeadingImage = true,
     leadingImageAlt,
+    leadingImageSrc,
   }) => {
     const variant = variantProp;
     const sizing = sizingProp;
@@ -56,7 +57,7 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
     };
 
     // For "responsive", emit both orientations so the <picture> source can
-    // swap at smd without a second card in the DOM.
+    // swap at md (640px) without a second card in the DOM.
     const backgroundImage =
       variant === "responsive"
         ? getBackgroundImage(post, "horizontal")
@@ -78,6 +79,7 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
         showByline={showByline}
         showLeadingImage={showLeadingImage}
         leadingImageAlt={leadingImageAlt}
+        leadingImageSrc={leadingImageSrc}
       />
     );
   },

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts

@@ -11,8 +11,8 @@ export interface ContentThumbnailTemplateProps {
   post: BlogPost;
   className?: string;
   /**
-   * vertical | horizontal — single layout. responsive — horizontal at <smd,
-   * vertical at ≥smd (Learn grid); single card, viewport-swapped via <picture>.
+   * vertical | horizontal — single layout. responsive — horizontal below md
+   * (640px), vertical from md up (Learn grid); one card, swapped via <picture>.
    */
   variant?: ContentThumbnailTemplateVariantValue;
   /**
@@ -28,6 +28,8 @@ export interface ContentThumbnailTemplateProps {
   showLeadingImage?: boolean;
   /** Alt for the tag mark. Empty when the mark repeats the title. */
   leadingImageAlt?: string;
+  /** Tag mark source. Falls back to the catalog tag for the post slug. */
+  leadingImageSrc?: string;
 }
 
 export interface ContentThumbnailTemplateViewProps {
@@ -42,4 +44,5 @@ export interface ContentThumbnailTemplateViewProps {
   showByline: boolean;
   showLeadingImage: boolean;
   leadingImageAlt?: string;
+  leadingImageSrc?: string;
 }

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx

@@ -14,18 +14,19 @@ function ContentThumbnailTemplateView({
   showByline,
   showLeadingImage,
   leadingImageAlt,
+  leadingImageSrc,
 }: ContentThumbnailTemplateViewProps) {
   if (variant === "responsive") {
-    // Single card; <picture> swaps the orientation-specific image at smd
-    // (530px), aspect-ratio and content positioning switch via Tailwind.
+    // Single card; <picture> swaps to the vertical image at md (640px),
+    // which is where Learn's grid goes from one landscape card to two.
     return (
       <Link href={href} className={`group block w-full ${className}`}>
-        <div className="relative aspect-[320/225.5] w-full overflow-hidden smd:aspect-[260/390]">
+        <div className="relative aspect-[320/225.5] w-full overflow-hidden md:aspect-[260/390]">
           <div className="absolute inset-0 z-0">
             <picture>
               {backgroundImageSmd ? (
                 <source
-                  media="(min-width: 530px)"
+                  media="(min-width: 640px)"
                   srcSet={backgroundImageSmd}
                 />
               ) : null}
@@ -37,13 +38,14 @@ function ContentThumbnailTemplateView({
               />
             </picture>
           </div>
-          <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%] max-h-[48%] overflow-hidden smd:left-[6.923%] smd:top-[4.615%] smd:w-[76.923%]">
+          <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%] max-h-[68%] overflow-hidden md:left-[6.923%] md:top-[4.615%] md:max-h-[48%] md:w-[76.923%]">
             <ContentContainer
               post={post}
               size="xs"
               showByline={showByline}
               showLeadingImage={showLeadingImage}
               leadingImageAlt={leadingImageAlt}
+              leadingImageSrc={leadingImageSrc}
             />
           </div>
         </div>
@@ -72,6 +74,7 @@ function ContentThumbnailTemplateView({
                 showByline={showByline}
                 showLeadingImage={showLeadingImage}
                 leadingImageAlt={leadingImageAlt}
+                leadingImageSrc={leadingImageSrc}
               />
             </div>
           </div>
@@ -97,6 +100,7 @@ function ContentThumbnailTemplateView({
               showByline={showByline}
               showLeadingImage={showLeadingImage}
               leadingImageAlt={leadingImageAlt}
+                leadingImageSrc={leadingImageSrc}
             />
           </div>
         </div>
@@ -124,6 +128,7 @@ function ContentThumbnailTemplateView({
               showByline={showByline}
               showLeadingImage={showLeadingImage}
               leadingImageAlt={leadingImageAlt}
+                leadingImageSrc={leadingImageSrc}
             />
           </div>
         </div>
@@ -149,6 +154,7 @@ function ContentThumbnailTemplateView({
             showByline={showByline}
             showLeadingImage={showLeadingImage}
             leadingImageAlt={leadingImageAlt}
+                leadingImageSrc={leadingImageSrc}
           />
         </div>
       </div>