app/components/sections/LogoWall/LogoWall.view.tsx

@@ -11,11 +11,11 @@ function LogoWallView({ displayLogos, className }: LogoWallViewProps) {
       data-figma-node="18483-18425"
     >
       <div className="w-full opacity-60">
-        <div className="flex w-full flex-col items-center gap-[38.4px] sm:flex-row sm:flex-wrap sm:justify-around md:flex-nowrap md:justify-between lg:gap-[var(--space-1200)]">
+        <div className="flex w-full flex-col items-center justify-center gap-[38.4px] sm:flex-row sm:flex-wrap sm:justify-center md:flex-nowrap lg:gap-[var(--space-1200)]">
           {displayLogos.map((logo, index) => (
             <div
               key={logo.alt || index}
-              className="flex items-center justify-center md:shrink-0"
+              className="flex shrink-0 items-center justify-center"
             >
               <Image
                 src={logo.src}

stories/sections/LogoWall.stories.js

@@ -11,9 +11,9 @@ export default {
 
 ## Responsive Behavior
 
-- **Mobile**: stacked column
-- **SM+**: wrapping row
-- **MD+**: single space-between row
+- **Mobile**: stacked, centered
+- **SM+**: centered wrapping cluster
+- **MD+**: single centered row with a fixed gap
 
 ## Props
 

tests/unit/LogoWall.test.jsx

@@ -60,17 +60,20 @@ describe("LogoWall Component", () => {
     );
   });
 
-  test("lays out the three marks in a wrapping row", () => {
+  test("lays out the three marks as a centered cluster", () => {
     render(<LogoWall />);
 
     const row = document.querySelector('[class*="flex w-full flex-col"]');
     expect(row).toBeInTheDocument();
     expect(row).toHaveClass(
+      "justify-center",
       "sm:flex-row",
+      "sm:justify-center",
       "md:flex-nowrap",
-      "md:justify-between",
       "gap-[38.4px]",
     );
+    expect(row).not.toHaveClass("md:justify-between");
+    expect(row).not.toHaveClass("sm:justify-around");
   });
 
   test("renders logos with correct attributes", () => {