diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx
index d78cc30a7e..1a60b3a4f8 100644
--- a/dotcom-rendering/src/components/DecideContainer.tsx
+++ b/dotcom-rendering/src/components/DecideContainer.tsx
@@ -1,5 +1,6 @@
 import type { ImgHTMLAttributes } from 'react';
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRContainerType,
 	DCRFrontCard,
@@ -41,6 +42,7 @@ type Props = {
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 };
 
 export const DecideContainer = ({
@@ -51,6 +53,7 @@ export const DecideContainer = ({
 	showAge,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: Props) => {
 	// If you add a new container type which contains an MPU, you must also add it to
 	switch (containerType) {
@@ -242,6 +245,7 @@ export const DecideContainer = ({
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
 				/>
 			);
 		case 'flexible/general':
@@ -252,6 +256,7 @@ export const DecideContainer = ({
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
 				/>
 			);
 		case 'scrollable/small':
@@ -264,6 +269,7 @@ export const DecideContainer = ({
 						containerPalette={containerPalette}
 						showAge={showAge}
 						absoluteServerTimes={absoluteServerTimes}
+						aspectRatio={aspectRatio}
 					/>
 				</Island>
 			);
@@ -277,6 +283,7 @@ export const DecideContainer = ({
 						containerPalette={containerPalette}
 						showAge={showAge}
 						absoluteServerTimes={absoluteServerTimes}
+						aspectRatio={aspectRatio}
 					/>
 				</Island>
 			);
@@ -288,6 +295,7 @@ export const DecideContainer = ({
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
 				/>
 			);
 		case 'scrollable/feature':
@@ -298,6 +306,7 @@ export const DecideContainer = ({
 						imageLoading={imageLoading}
 						containerPalette={containerPalette}
 						absoluteServerTimes={absoluteServerTimes}
+						aspectRatio={aspectRatio}
 					/>
 				</Island>
 			);
@@ -308,6 +317,7 @@ export const DecideContainer = ({
 					containerPalette={containerPalette}
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
 				/>
 			);
 		default:
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
index 98ba581a44..6923c0d348 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
@@ -145,6 +145,7 @@ const meta = {
 		showAge: true,
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
+		aspectRatio: '5:4',
 	},
 	render: ({ frontSectionTitle, ...args }) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
index fe62b7f3e2..ffb4883c15 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -1,6 +1,7 @@
 import { palette } from '../palette';
 import type { BoostLevel } from '../types/content';
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRFrontCard,
 	DCRGroupedTrails,
@@ -24,6 +25,7 @@ type Props = {
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 };
 
 type RowLayout = 'oneCard' | 'oneCardBoosted' | 'twoCard';
@@ -155,12 +157,14 @@ export const SplashCardLayout = ({
 	showAge,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -202,7 +206,7 @@ export const SplashCardLayout = ({
 							: supportingContentAlignment
 					}
 					imageLoading={imageLoading}
-					aspectRatio="5:4"
+					aspectRatio={aspectRatio}
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
 					liveUpdatesAlignment={liveUpdatesAlignment}
@@ -262,12 +266,14 @@ export const BoostedCardLayout = ({
 	showAge,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -302,7 +308,7 @@ export const BoostedCardLayout = ({
 							: supportingContentAlignment
 					}
 					imageLoading={imageLoading}
-					aspectRatio="5:4"
+					aspectRatio={aspectRatio}
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
 					liveUpdatesAlignment="horizontal"
@@ -323,6 +329,7 @@ export const StandardCardLayout = ({
 	showImage = true,
 	imageLoading,
 	isFirstRow,
+	aspectRatio,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
@@ -331,6 +338,7 @@ export const StandardCardLayout = ({
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	showImage?: boolean;
+	aspectRatio: AspectRatio;
 }) => {
 	if (cards.length === 0) return null;
 
@@ -370,7 +378,7 @@ export const StandardCardLayout = ({
 							supportingContentAlignment="vertical"
 							supportingContentPosition="outer"
 							imageSize={'medium'}
-							aspectRatio="5:4"
+							aspectRatio={aspectRatio}
 							kickerText={card.kickerText}
 							showLivePlayable={false}
 							showTopBarDesktop={false}
@@ -400,6 +408,7 @@ export const FlexibleGeneral = ({
 	showAge,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1);
 	const cards = [...groupedTrails.standard].slice(0, 8);
@@ -414,6 +423,7 @@ export const FlexibleGeneral = ({
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
 				/>
 			)}
 
@@ -427,6 +437,7 @@ export const FlexibleGeneral = ({
 								showAge={showAge}
 								absoluteServerTimes={absoluteServerTimes}
 								imageLoading={imageLoading}
+								aspectRatio={aspectRatio}
 							/>
 						);
 
@@ -441,6 +452,7 @@ export const FlexibleGeneral = ({
 								absoluteServerTimes={absoluteServerTimes}
 								imageLoading={imageLoading}
 								isFirstRow={i === 0}
+								aspectRatio={aspectRatio}
 							/>
 						);
 				}
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
index b81c75cfcd..257655d6f9 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
@@ -32,6 +32,7 @@ const meta = {
 		showAge: true,
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
+		aspectRatio: '5:4',
 	},
 	render: (args) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
index c9fa2473a3..fc1fff0559 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -1,5 +1,6 @@
 import type { BoostLevel } from '../types/content';
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRFrontCard,
 	DCRGroupedTrails,
@@ -22,6 +23,7 @@ type Props = {
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 };
 
 type BoostProperties = {
@@ -110,12 +112,14 @@ export const OneCardLayout = ({
 	showAge,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -149,7 +153,7 @@ export const OneCardLayout = ({
 					supportingContent={card.supportingContent}
 					supportingContentAlignment={supportingContentAlignment}
 					imageLoading={imageLoading}
-					aspectRatio="5:4"
+					aspectRatio={aspectRatio}
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
 					liveUpdatesAlignment={liveUpdatesAlignment}
@@ -170,6 +174,7 @@ const TwoCardOrFourCardLayout = ({
 	absoluteServerTimes,
 	showImage = true,
 	imageLoading,
+	aspectRatio,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
@@ -177,6 +182,7 @@ const TwoCardOrFourCardLayout = ({
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	showImage?: boolean;
+	aspectRatio: AspectRatio;
 }) => {
 	if (cards.length === 0) return null;
 	const hasTwoOrFewerCards = cards.length <= 2;
@@ -210,7 +216,7 @@ const TwoCardOrFourCardLayout = ({
 							/* we don't want to support sublinks on standard cards here so we hard code to undefined */
 							supportingContent={undefined}
 							imageSize={'medium'}
-							aspectRatio="5:4"
+							aspectRatio={aspectRatio}
 							kickerText={card.kickerText}
 							showLivePlayable={false}
 							showTopBarDesktop={false}
@@ -229,6 +235,7 @@ export const FlexibleSpecial = ({
 	showAge,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: Props) => {
 	const snaps = [...groupedTrails.snap].slice(0, 1);
 	const splash = [...groupedTrails.standard].slice(0, 1);
@@ -242,6 +249,7 @@ export const FlexibleSpecial = ({
 				showAge={showAge}
 				absoluteServerTimes={absoluteServerTimes}
 				imageLoading={imageLoading}
+				aspectRatio={aspectRatio}
 			/>
 			<OneCardLayout
 				cards={splash}
@@ -249,6 +257,7 @@ export const FlexibleSpecial = ({
 				showAge={showAge}
 				absoluteServerTimes={absoluteServerTimes}
 				imageLoading={imageLoading}
+				aspectRatio={aspectRatio}
 			/>
 			<TwoCardOrFourCardLayout
 				cards={cards}
@@ -256,6 +265,7 @@ export const FlexibleSpecial = ({
 				showAge={showAge}
 				absoluteServerTimes={absoluteServerTimes}
 				imageLoading={imageLoading}
+				aspectRatio={aspectRatio}
 			/>
 		</>
 	);
diff --git a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
index 253862e4f0..17ead5b643 100644
--- a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
@@ -1,5 +1,9 @@
 import { ArticleDesign } from '../lib/articleFormat';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
+import type {
+	AspectRatio,
+	DCRContainerPalette,
+	DCRFrontCard,
+} from '../types/front';
 import { FeatureCard } from './FeatureCard';
 import { ScrollableCarousel } from './ScrollableCarousel';
 
@@ -8,6 +12,7 @@ type Props = {
 	containerPalette?: DCRContainerPalette;
 	absoluteServerTimes: boolean;
 	imageLoading: 'lazy' | 'eager';
+	aspectRatio: AspectRatio;
 };
 
 /**
@@ -22,6 +27,7 @@ export const ScrollableFeature = ({
 	containerPalette,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: Props) => {
 	return (
 		<ScrollableCarousel
@@ -58,7 +64,7 @@ export const ScrollableFeature = ({
 							containerPalette={containerPalette}
 							absoluteServerTimes={absoluteServerTimes}
 							imageLoading={imageLoading}
-							aspectRatio="4:5"
+							aspectRatio={aspectRatio}
 							imageSize="feature"
 							headlineSizes={{
 								desktop: 'xsmall',
diff --git a/dotcom-rendering/src/components/ScrollableFeature.stories.tsx b/dotcom-rendering/src/components/ScrollableFeature.stories.tsx
index 0d3bfa9c53..d932122b27 100644
--- a/dotcom-rendering/src/components/ScrollableFeature.stories.tsx
+++ b/dotcom-rendering/src/components/ScrollableFeature.stories.tsx
@@ -69,6 +69,7 @@ const meta = {
 		containerPalette: undefined,
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
+		aspectRatio: '4:5',
 	},
 	render: (args) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
index 38cecad70a..c1797103f4 100644
--- a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
@@ -1,4 +1,5 @@
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRContainerType,
 	DCRFrontCard,
@@ -13,6 +14,7 @@ type Props = {
 	absoluteServerTimes?: boolean;
 	imageLoading: 'lazy' | 'eager';
 	containerType: DCRContainerType;
+	aspectRatio: AspectRatio;
 };
 
 /**
@@ -29,6 +31,7 @@ export const ScrollableMedium = ({
 	absoluteServerTimes,
 	imageLoading,
 	showAge,
+	aspectRatio,
 }: Props) => {
 	return (
 		<ScrollableCarousel
@@ -55,7 +58,7 @@ export const ScrollableMedium = ({
 							imageSize="medium"
 							trailText={undefined} // unsupported
 							supportingContent={undefined} // unsupported
-							aspectRatio="5:4"
+							aspectRatio={aspectRatio}
 							kickerText={trail.kickerText}
 							showLivePlayable={trail.showLivePlayable}
 							showTopBarDesktop={false}
diff --git a/dotcom-rendering/src/components/ScrollableMedium.stories.tsx b/dotcom-rendering/src/components/ScrollableMedium.stories.tsx
index be9859f20c..f1030a2a8b 100644
--- a/dotcom-rendering/src/components/ScrollableMedium.stories.tsx
+++ b/dotcom-rendering/src/components/ScrollableMedium.stories.tsx
@@ -25,6 +25,7 @@ const meta = {
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
 		containerType: 'scrollable/medium',
+		aspectRatio: '5:4',
 	},
 	render: (args) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
index b501c2aa28..2ad9059155 100644
--- a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
@@ -1,4 +1,5 @@
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRContainerType,
 	DCRFrontCard,
@@ -13,6 +14,7 @@ type Props = {
 	absoluteServerTimes?: boolean;
 	imageLoading: 'lazy' | 'eager';
 	containerType: DCRContainerType;
+	aspectRatio: AspectRatio;
 };
 
 /**
@@ -29,6 +31,7 @@ export const ScrollableSmall = ({
 	absoluteServerTimes,
 	imageLoading,
 	showAge,
+	aspectRatio,
 }: Props) => {
 	return (
 		<ScrollableCarousel
@@ -55,7 +58,7 @@ export const ScrollableSmall = ({
 							imageSize="small"
 							trailText={undefined} // unsupported
 							supportingContent={undefined} // unsupported
-							aspectRatio="5:4"
+							aspectRatio={aspectRatio}
 							kickerText={trail.kickerText}
 							showLivePlayable={trail.showLivePlayable}
 							showTopBarDesktop={false}
diff --git a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
index b6520797ce..394a218617 100644
--- a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
+++ b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
@@ -25,6 +25,7 @@ const meta = {
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
 		containerType: 'scrollable/small',
+		aspectRatio: '5:4',
 	},
 	render: (args) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx
index 11011461d2..7fa398bf2d 100644
--- a/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx
+++ b/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx
@@ -22,6 +22,7 @@ const meta = {
 		trails: trails.slice(0, 2),
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
+		aspectRatio: '4:5',
 	},
 	render: (args) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
index 08f8ed9609..7633267e34 100644
--- a/dotcom-rendering/src/components/StaticFeatureTwo.tsx
+++ b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
@@ -1,5 +1,9 @@
 import { ArticleDesign } from '../lib/articleFormat';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
+import type {
+	AspectRatio,
+	DCRContainerPalette,
+	DCRFrontCard,
+} from '../types/front';
 import { LI } from './Card/components/LI';
 import { UL } from './Card/components/UL';
 import type { Loading } from './CardPicture';
@@ -10,12 +14,14 @@ type Props = {
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	absoluteServerTimes: boolean;
+	aspectRatio: AspectRatio;
 };
 export const StaticFeatureTwo = ({
 	trails,
 	containerPalette,
 	absoluteServerTimes,
 	imageLoading,
+	aspectRatio,
 }: Props) => {
 	const cards = trails.slice(0, 2);
 
@@ -61,7 +67,7 @@ export const StaticFeatureTwo = ({
 							trailText={card.trailText}
 							absoluteServerTimes={absoluteServerTimes}
 							imageLoading={imageLoading}
-							aspectRatio="4:5"
+							aspectRatio={aspectRatio}
 							imageSize="feature-large"
 							headlineSizes={{ desktop: 'small' }}
 							supportingContent={card.supportingContent}
diff --git a/dotcom-rendering/src/components/StaticMediumFour.stories.tsx b/dotcom-rendering/src/components/StaticMediumFour.stories.tsx
index 24e217d017..0f5c249a35 100644
--- a/dotcom-rendering/src/components/StaticMediumFour.stories.tsx
+++ b/dotcom-rendering/src/components/StaticMediumFour.stories.tsx
@@ -23,6 +23,7 @@ const meta = {
 		showAge: true,
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
+		aspectRatio: '5:4',
 	},
 	render: (args) => (
 		<FrontSection
diff --git a/dotcom-rendering/src/components/StaticMediumFour.tsx b/dotcom-rendering/src/components/StaticMediumFour.tsx
index d9f2263579..0a53ae978a 100644
--- a/dotcom-rendering/src/components/StaticMediumFour.tsx
+++ b/dotcom-rendering/src/components/StaticMediumFour.tsx
@@ -1,4 +1,8 @@
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
+import type {
+	AspectRatio,
+	DCRContainerPalette,
+	DCRFrontCard,
+} from '../types/front';
 import { LI } from './Card/components/LI';
 import { UL } from './Card/components/UL';
 import type { Loading } from './CardPicture';
@@ -11,6 +15,7 @@ type Props = {
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	showImage?: boolean;
+	aspectRatio: AspectRatio;
 };
 
 export const StaticMediumFour = ({
@@ -20,6 +25,7 @@ export const StaticMediumFour = ({
 	absoluteServerTimes,
 	imageLoading,
 	showImage = true,
+	aspectRatio,
 }: Props) => {
 	const cards = trails.slice(0, 4);
 
@@ -51,7 +57,7 @@ export const StaticMediumFour = ({
 							/* we don't want to support sublinks on standard cards here so we hard code to undefined */
 							supportingContent={undefined}
 							imageSize={'medium'}
-							aspectRatio="5:4"
+							aspectRatio={aspectRatio}
 							kickerText={card.kickerText}
 							showLivePlayable={false}
 							showTopBarDesktop={false}
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
index c2a5160946..aec7a38bf6 100644
--- a/dotcom-rendering/src/layouts/FrontLayout.tsx
+++ b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -45,7 +45,11 @@ import {
 import { hideAge } from '../lib/hideAge';
 import type { NavType } from '../model/extract-nav';
 import { palette as schemePalette } from '../palette';
-import { type DCRCollectionType, type DCRFrontType } from '../types/front';
+import type {
+	DCRCollectionType,
+	DCRContainerType,
+	DCRFrontType,
+} from '../types/front';
 import { pageSkinContainer } from './lib/pageSkin';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
@@ -170,6 +174,24 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const { absoluteServerTimes = false } = front.config.switches;
 
+	const fallBackAspectRatio = (collectionType: DCRContainerType) => {
+		switch (collectionType) {
+			case 'scrollable/feature':
+			case 'static/feature/2':
+				return '4:5';
+			case 'flexible/general':
+			case 'flexible/special':
+			case 'scrollable/small':
+			case 'scrollable/medium':
+			case 'static/medium/4':
+				return '5:4';
+			case 'scrollable/highlights':
+				return '1:1';
+			default:
+				return '5:3';
+		}
+	};
+
 	const Highlights = () => {
 		const showHighlights =
 			// Must be opted into the Europe beta test or in preview
@@ -191,6 +213,13 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 					showAge={false}
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading="eager"
+					aspectRatio={
+						highlightsCollection.aspectRatio
+							? highlightsCollection.aspectRatio
+							: fallBackAspectRatio(
+									highlightsCollection.collectionType,
+							  )
+					}
 				/>
 			)
 		);
@@ -531,6 +560,13 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 										absoluteServerTimes={
 											absoluteServerTimes
 										}
+										aspectRatio={
+											collection.aspectRatio
+												? collection.aspectRatio
+												: fallBackAspectRatio(
+														collection.collectionType,
+												  )
+										}
 									/>
 								</LabsSection>
 								{decideMerchHighAndMobileAdSlots(
@@ -696,6 +732,13 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 									}
 									imageLoading={imageLoading}
 									absoluteServerTimes={absoluteServerTimes}
+									aspectRatio={
+										collection.aspectRatio
+											? collection.aspectRatio
+											: fallBackAspectRatio(
+													collection.collectionType,
+											  )
+									}
 								/>
 							</FrontSection>
 							{decideMerchHighAndMobileAdSlots(