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>

tests/pages/learn.test.tsx

@@ -119,7 +119,14 @@ describe("LearnPage", () => {
     render(<LearnPage />);
 
     const grid = screen.getByTestId("learn-article-grid");
-    expect(grid).toHaveClass("smd:justify-center", "smd:flex-wrap");
+    expect(grid).toHaveClass("md:justify-center", "md:flex-wrap");
+    expect(grid).toHaveClass(
+      "lg:[&>*]:w-[calc((100%-2*var(--space-400))/3)]",
+    );
+    expect(grid).toHaveClass(
+      "xl:[&>*]:w-[calc((100%-3*var(--space-400))/4)]",
+    );
+    expect(grid.className).not.toContain("/5)]");
 
     const links = within(grid).getAllByRole("link");
     expect(links).toHaveLength(mockPosts.length + 1);
@@ -136,7 +143,7 @@ describe("LearnPage", () => {
     expect(within(grid).queryByText("April 15, 2025")).not.toBeInTheDocument();
 
     const sources = grid.querySelectorAll(
-      "picture source[media='(min-width: 530px)']",
+      "picture source[media='(min-width: 640px)']",
     );
     expect(sources.length).toBe(mockPosts.length + 1);