Apply the FAQ Small, Medium, and Large variants at the matching breakpoints so the About accordion is not using desktop inset and type on tablet.

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

tests/components/layout/Accordion.test.tsx

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom/vitest";
 import userEvent from "@testing-library/user-event";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
@@ -19,4 +20,25 @@ describe("Accordion", () => {
 
     expect(screen.getByText("Answer copy")).toBeInTheDocument();
   });
+
+  it("stacks FAQ size variants at lg and xl", () => {
+    render(
+      <Accordion size="s" lgSize="m" xlSize="l" title="Question">
+        Answer copy
+      </Accordion>,
+    );
+
+    const button = screen.getByRole("button", { name: "Question" });
+    expect(button).toHaveClass("min-h-[88px]");
+    expect(button).toHaveClass("lg:min-h-[104px]");
+    expect(button).toHaveClass("xl:min-h-[135px]");
+    expect(button).toHaveClass("xl:gap-[var(--spacing-scale-048)]");
+
+    const title = screen.getByText("Question");
+    expect(title).toHaveClass("text-[14px]");
+    expect(title).toHaveClass("lg:text-large-label");
+    expect(title).toHaveClass("xl:text-x-large-label");
+    expect(title).toHaveClass("xl:font-normal");
+    expect(title).toHaveClass("xl:leading-7");
+  });
 });