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.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>