Limit the Use Cases tools row to the three catalog articles, make it mouse-draggable instead of auto-advancing, and put card titles on Bricolage Grotesque so they match the design.

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

tests/components/RelatedArticles.test.tsx

@@ -98,11 +98,28 @@ describe("RelatedArticles", () => {
         variant="useCases"
       />,
     );
-    expect(
-      screen.getByRole("heading", {
-        level: 2,
-        name: /Tools to set your group up for success/,
-      }),
-    ).toBeInTheDocument();
+    const heading = screen.getByRole("heading", {
+      level: 2,
+      name: /Tools to set your group up for success/,
+    });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveClass(
+      "font-bricolage-grotesque",
+      "lg:text-xx-large-heading",
+    );
+  });
+
+  it("useCases variant uses a mouse-draggable track", () => {
+    render(
+      <RelatedArticles
+        relatedPosts={mockPosts}
+        currentPostSlug="current"
+        variant="useCases"
+      />,
+    );
+    expect(screen.getByTestId("related-articles-track")).toHaveClass(
+      "overflow-x-auto",
+      "cursor-grab",
+    );
   });
 });

tests/unit/ContentContainer.test.jsx

@@ -72,7 +72,7 @@ describe("ContentContainer", () => {
     const title = screen.getByText("Test Article Title");
     expect(title).toBeInTheDocument();
     expect(title).toHaveClass(
-      "font-bricolage",
+      "font-bricolage-grotesque",
       "font-medium",
       "text-xx-small-display",
       "text-[var(--color-content-inverse-brand-royal)]",