Keep Triple Step art flush to the section’s right edge.

Drop the mid-width side gutter so the 1:2 ornament column meets the viewport from md up, while copy keeps its left inset.

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

app/components/type/TripleStep/TripleStep.container.tsx

@@ -5,7 +5,7 @@ import TripleStepView from "./TripleStep.view";
 import type { TripleStepProps } from "./TripleStep.types";
 
 /**
- * Figma: **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527&m=dev)); **md+** two-column + **`triple-step.svg`**.
+ * Figma: **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527&m=dev)); **md+** two-column + **`triple-step.svg`** in a 1:2 frame (tablet [22084-859257](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859257&m=dev); desktop [22084-858823](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-858823&m=dev)).
  */
 const TripleStepContainer = memo<TripleStepProps>((props) => {
   const reactId = useId();

app/components/type/TripleStep/TripleStep.view.tsx

@@ -28,10 +28,10 @@ function TripleStepView({
     <section
       data-figma-node="22084-859405"
       aria-labelledby={headingId}
-      className={`bg-transparent p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] ${className}`.trim()}
+      className={`bg-transparent px-[var(--spacing-scale-032)] py-[var(--spacing-scale-032)] md:px-0 md:py-[var(--spacing-scale-048)] ${className}`.trim()}
     >
-      <div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 gap-[var(--spacing-scale-032)] md:max-w-[1400px] md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:items-stretch md:gap-[var(--spacing-scale-060)] lg:items-center">
+      <div className="mx-auto grid w-full min-w-0 max-w-[560px] grid-cols-1 items-center gap-[var(--spacing-scale-032)] md:max-w-none md:grid-cols-2 md:gap-0">
-        <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:self-start lg:self-center">
+        <div className="flex w-full min-w-0 flex-col gap-[var(--spacing-scale-040)] break-words md:pl-[var(--spacing-scale-032)] lg:min-w-[358px] lg:pl-[var(--spacing-scale-064)]">
           <h2
             id={headingId}
             className="font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading"
@@ -73,16 +73,16 @@ function TripleStepView({
           </div>
         </div>
         <div
-          className="hidden min-h-0 min-w-0 w-full md:flex md:items-center md:justify-center"
+          className="relative hidden aspect-[1/2] min-w-0 w-full md:block"
           aria-hidden
         >
           <Image
             src={shapeSrc}
             alt=""
-            width={288}
+            fill
-            height={576}
             unoptimized
-            className="pointer-events-none h-auto w-full max-w-full min-w-0 select-none object-contain"
+            sizes="(min-width: 640px) 50vw, 100vw"
+            className="object-contain"
           />
         </div>
       </div>

stories/type/TripleStep.stories.js

@@ -23,7 +23,7 @@ export default {
     docs: {
       description: {
         component:
-          "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** second column shows **`triple-step.svg`**.",
+          "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** right column is a 1:2 **`triple-step.svg`** frame flush to the section edge.",
       },
     },
   },

tests/components/type/TripleStep.test.tsx

@@ -28,5 +28,11 @@ describe("TripleStep", () => {
       "href",
       "/create",
     );
+
+    const artImg = document.querySelector(
+      '[data-figma-node="22084-859405"] img',
+    );
+    expect(artImg).toBeTruthy();
+    expect(artImg?.parentElement).toHaveClass("aspect-[1/2]");
   });
 });