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(