Center leftover Learn cards on a short last row and keep thumbnail copy in the top half so it does not cover the artwork.

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

tests/pages/learn.test.tsx

@@ -83,12 +83,12 @@ describe("LearnPage", () => {
   });
 
   it("renders one card per post (single responsive grid, no duplication)", () => {
-    const { container } = render(<LearnPage />);
+    render(<LearnPage />);
 
-    const grid = container.querySelector(".smd\\:grid");
-    expect(grid).toBeTruthy();
+    const grid = screen.getByTestId("learn-article-grid");
+    expect(grid).toHaveClass("smd:justify-center", "smd:flex-wrap");
 
-    const links = within(grid as HTMLElement).getAllByRole("link");
+    const links = within(grid).getAllByRole("link");
     expect(links).toHaveLength(mockPosts.length);
 
     expect(links[0]).toHaveAttribute(

tests/unit/ContentThumbnailTemplate.test.jsx

@@ -35,6 +35,8 @@ describe("ContentThumbnailTemplate", () => {
       const container = screen.getByRole("link");
       const thumbnailDiv = container.querySelector("div.relative");
       expect(thumbnailDiv).toHaveClass("aspect-[260/390]", "w-full");
+      const copy = thumbnailDiv?.querySelector(".z-20");
+      expect(copy).toHaveClass("max-h-[48%]", "overflow-hidden");
     });
 
     it("should display post title and description", () => {
@@ -61,6 +63,8 @@ describe("ContentThumbnailTemplate", () => {
       const container = screen.getByRole("link");
       const thumbnailDiv = container.querySelector("div.relative");
       expect(thumbnailDiv).toHaveClass("aspect-[320/225.5]", "w-full");
+      const copy = thumbnailDiv?.querySelector(".z-20");
+      expect(copy).toHaveClass("max-h-[48%]", "overflow-hidden");
     });
 
     it("should render fixed vertical dimensions when sizing is fixed", () => {