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");
+  });
 });

tests/components/sections/Accordion.test.tsx

@@ -0,0 +1,27 @@
+import "@testing-library/jest-dom/vitest";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import FaqAccordion from "../../../app/components/sections/Accordion";
+
+describe("FaqAccordion", () => {
+  it("uses Figma section inset per breakpoint and does not cap the inner stack at 1440", () => {
+    const { container } = render(
+      <FaqAccordion
+        title="Get answers to your questions"
+        items={[{ title: "What is CommunityRule, and who is it for?", answer: "Groups." }]}
+      />,
+    );
+
+    const section = container.querySelector("section");
+    expect(section).toBeTruthy();
+    expect(section).toHaveClass("px-[var(--spacing-scale-004)]");
+    expect(section).toHaveClass("py-[var(--spacing-scale-032)]");
+    expect(section).toHaveClass("md:px-[var(--spacing-scale-096)]");
+    expect(section).toHaveClass("md:py-[var(--spacing-scale-064)]");
+    expect(section).toHaveClass("lg:px-[var(--spacing-scale-160)]");
+    expect(section).toHaveClass("lg:py-[var(--spacing-scale-096)]");
+    expect(section).not.toHaveClass("md:px-[var(--spacing-scale-160)]");
+    expect(section).not.toHaveClass("md:py-[var(--spacing-scale-096)]");
+    expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]");
+  });
+});