diff --git a/dotcom-rendering/src/components/MoreGalleries.stories.tsx b/dotcom-rendering/src/components/MoreGalleries.stories.tsx
index 7dd15afb3e7..644b5862eaf 100644
--- a/dotcom-rendering/src/components/MoreGalleries.stories.tsx
+++ b/dotcom-rendering/src/components/MoreGalleries.stories.tsx
@@ -1,3 +1,4 @@
+import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { galleryOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const MoreGalleries = {
+export const Default = {
 	args: {
 		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
 		guardianBaseUrl: 'https://www.theguardian.com',
@@ -23,4 +24,41 @@ export const MoreGalleries = {
 			theme: Pillar.Culture,
 		},
 	},
+	parameters: {
+		chromatic: {
+			viewports: [breakpoints.mobile, breakpoints.desktop],
+		},
+	},
+} satisfies Story;
+
+export const WithFourCards = {
+	...Default,
+	args: {
+		...Default.args,
+		trails: galleryOnwardsTrails.slice(0, 4),
+	},
+} satisfies Story;
+
+export const WithThreeCards = {
+	...Default,
+	args: {
+		...Default.args,
+		trails: galleryOnwardsTrails.slice(0, 3),
+	},
+} satisfies Story;
+
+export const WithTwoCards = {
+	...Default,
+	args: {
+		...Default.args,
+		trails: galleryOnwardsTrails.slice(0, 2),
+	},
+} satisfies Story;
+
+export const WithOneCard = {
+	...Default,
+	args: {
+		...Default.args,
+		trails: galleryOnwardsTrails.slice(0, 1),
+	},
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/MoreGalleries.tsx b/dotcom-rendering/src/components/MoreGalleries.tsx
index 34f38e71844..bd33204edd3 100644
--- a/dotcom-rendering/src/components/MoreGalleries.tsx
+++ b/dotcom-rendering/src/components/MoreGalleries.tsx
@@ -22,35 +22,14 @@ type Props = {
 	format: ArticleFormat;
 };
 
-const standardCardStyles = css`
-	flex: 1;
-	position: relative;
-	display: flex;
-	padding: ${space[2]}px;
-	background-color: ${palette('--onward-more-galleries-card-background')};
-
-	${from.tablet} {
-		:not(:first-child)::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: -10px; /* shift into the gap */
-			width: 1px;
-			background: ${palette('--onward-content-border')};
-		}
-	}
-`;
-
 const standardCardsListStyles = css`
 	width: 100%;
-	display: flex;
-	flex-direction: column;
+	display: grid;
 	gap: 20px;
 	margin-bottom: ${space[6]}px;
 
 	${from.tablet} {
-		flex-direction: row;
+		grid-template-columns: repeat(4, 1fr);
 		padding-top: ${space[2]}px;
 	}
 
@@ -80,6 +59,107 @@ const cardsContainerStyles = css`
 	}
 `;
 
+const standardCardStyles = css`
+	position: relative;
+	display: flex;
+	padding: ${space[2]}px;
+	background-color: ${palette('--onward-more-galleries-card-background')};
+
+	${from.tablet} {
+		:not(:first-child)::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -10px; /* shift into the gap */
+			width: 1px;
+			background: ${palette('--onward-content-border')};
+		}
+	}
+`;
+
+const headerStyles = css`
+	color: ${palette('--carousel-text')};
+	${headlineBold24};
+	padding-bottom: ${space[3]}px;
+	padding-top: ${space[1]}px;
+
+	:hover {
+		text-decoration: underline;
+	}
+
+	${from.tablet} {
+		${headlineBold28};
+	}
+`;
+
+const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
+	<a
+		css={css`
+			${grid.column.centre}
+			color: ${palette('--caption-text')};
+			text-decoration: none;
+			align-self: start;
+
+			${from.leftCol} {
+				${grid.column.left}
+			}
+		`}
+		href={`${guardianBaseUrl}/inpictures/all`}
+		data-link-name="section heading"
+	>
+		<h2 css={headerStyles}>More galleries</h2>
+	</a>
+);
+
+const MoreGalleriesSplashCard = ({
+	defaultProps,
+}: {
+	defaultProps: CardProps;
+}) => {
+	const cardProps: Partial<CardProps> = {
+		headlineSizes: {
+			desktop: 'medium',
+			tablet: 'medium',
+			mobile: 'medium',
+		},
+		mediaPositionOnDesktop: 'right',
+		mediaPositionOnMobile: 'top',
+		mediaSize: 'medium',
+		isOnwardSplash: true,
+	};
+
+	return (
+		<div
+			css={[
+				cardsContainerStyles,
+				css`
+					margin-bottom: ${space[6]}px;
+					background-color: ${palette(
+						'--onward-more-galleries-card-background',
+					)};
+					padding: ${space[2]}px;
+					${from.leftCol} {
+						&::before {
+							content: '';
+							position: absolute;
+							left: -11px;
+							top: 8px;
+							bottom: 0;
+							width: 1px;
+							background-color: ${palette(
+								'--onward-content-border',
+							)};
+						}
+					}
+				`,
+			]}
+		>
+			<Card {...defaultProps} {...cardProps} />
+		</div>
+	);
+};
+
 const getDefaultCardProps = (
 	trail: TrailType,
 	discussionApiUrl: string,
@@ -121,6 +201,7 @@ const getDefaultCardProps = (
 		isOnwardContent: true,
 		onwardsSource: 'more-galleries',
 	};
+
 	return defaultProps;
 };
 
@@ -192,84 +273,3 @@ export const MoreGalleries = (props: Props) => {
 		</div>
 	);
 };
-
-const MoreGalleriesSplashCard = ({
-	defaultProps,
-}: {
-	defaultProps: CardProps;
-}) => {
-	const cardProps: Partial<CardProps> = {
-		headlineSizes: {
-			desktop: 'medium',
-			tablet: 'medium',
-			mobile: 'medium',
-		},
-		mediaPositionOnDesktop: 'right',
-		mediaPositionOnMobile: 'top',
-		mediaSize: 'medium',
-		isOnwardSplash: true,
-	};
-	return (
-		<div
-			css={[
-				cardsContainerStyles,
-				css`
-					margin-bottom: ${space[6]}px;
-					background-color: ${palette(
-						'--onward-more-galleries-card-background',
-					)};
-					padding: ${space[2]}px;
-					${from.leftCol} {
-						&::before {
-							content: '';
-							position: absolute;
-							left: -11px;
-							top: 8px;
-							bottom: 0;
-							width: 1px;
-							background-color: ${palette(
-								'--onward-content-border',
-							)};
-						}
-					}
-				`,
-			]}
-		>
-			<Card {...defaultProps} {...cardProps} />
-		</div>
-	);
-};
-
-const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
-	<a
-		css={css`
-			${grid.column.centre}
-			color: ${palette('--caption-text')};
-			text-decoration: none;
-			align-self: start;
-
-			${from.leftCol} {
-				${grid.column.left}
-			}
-		`}
-		href={`${guardianBaseUrl}/inpictures/all`}
-		data-link-name="section heading"
-	>
-		<h2 css={headerStyles}>More galleries</h2>
-	</a>
-);
-
-const headerStyles = css`
-	color: ${palette('--carousel-text')};
-	${headlineBold24};
-	padding-bottom: ${space[3]}px;
-	padding-top: ${space[1]}px;
-
-	:hover {
-		text-decoration: underline;
-	}
-
-	${from.tablet} {
-		${headlineBold28};
-	}
-`;