diff --git a/dotcom-rendering/src/components/GridItem.tsx b/dotcom-rendering/src/components/GridItem.tsx
index 42ac8857b2a..aba4f187131 100644
--- a/dotcom-rendering/src/components/GridItem.tsx
+++ b/dotcom-rendering/src/components/GridItem.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
 import { getZIndex } from '../lib/getZIndex';
 
 type Props = {
@@ -8,6 +8,7 @@ type Props = {
 	 * The element type to use.
 	 */
 	element?: 'div' | 'article' | 'main' | 'aside' | 'section';
+	customCss?: SerializedStyles;
 };
 
 const rightColumnStyles = css`
@@ -36,12 +37,14 @@ export const GridItem = ({
 	children,
 	area,
 	element: Element = 'div',
+	customCss,
 }: Props) => (
 	<Element
 		css={[
 			area === 'body' && bodyStyles,
 			area === 'right-column' && rightColumnStyles,
 			gridArea,
+			customCss,
 		]}
 		style={{
 			'--grid-area': area,
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index c2f9f24deee..308e01948ad 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -54,7 +54,13 @@ import {
 } from './lib/interactiveLegacyStyling';
 import { BannerWrapper, Stuck } from './lib/stickiness';
 
-const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
+const InteractiveGrid = ({
+	children,
+	topHat,
+}: {
+	children: React.ReactNode;
+	topHat: 'regular' | 'fullWidth';
+}) => (
 	<div
 		className={interactiveLegacyClasses.contentInteractiveGrid}
 		css={css`
@@ -78,84 +84,104 @@ const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
 
 				grid-column-gap: 10px;
 
-				/*
-					Explanation of each unit of grid-template-columns
-
-					Left Column (220 - 1px border)
-					Vertical grey border
-					Main content
-				*/
 				${from.wide} {
 					grid-template-columns: 219px 1px 1020px;
-
-					grid-template-areas:
-						'title  border  headline'
-						'.      border  standfirst'
-						'.      border  media'
-						'.      border  media'
-						'.      border  lines'
-						'.      border  meta'
-						'body   body    body'
-						'.      .       .';
+					grid-template-areas: ${topHat === 'fullWidth'
+						? `'media  media   media'
+						   'title  border  headline'
+						   '.      border  standfirst'
+						   '.      border  lines'
+						   '.      border  meta'
+						   'body   body    body'
+						   '.      .       .'`
+						: `'title  border  headline'
+						   '.      border  standfirst'
+						   '.      border  media'
+						   '.      border  media'
+						   '.      border  lines'
+						   '.      border  meta'
+						   'body   body    body'
+						   '.      .       .'`};
 				}
 
-				/*
-					Explanation of each unit of grid-template-columns
-
-					Left Column (220 - 1px border)
-					Vertical grey border
-					Main content
-				*/
 				${until.wide} {
 					grid-template-columns: 140px 1px 940px;
-
-					grid-template-areas:
-						'title  border  headline'
-						'.      border  standfirst'
-						'.      border  media'
-						'.      border  media'
-						'.      border  lines'
-						'.      border  meta'
-						'body   body    body'
-						'.      .       .';
+					grid-template-areas: ${topHat === 'fullWidth'
+						? `'media  media   media'
+						   'title  border  headline'
+						   '.      border  standfirst'
+						   '.      border  lines'
+						   '.      border  meta'
+						   'body   body    body'
+						   '.      .       .'`
+						: `'title  border  headline'
+						   '.      border  standfirst'
+						   '.      border  media'
+						   '.      border  media'
+						   '.      border  lines'
+						   '.      border  meta'
+						   'body   body    body'
+						   '.      .       .'`};
 				}
 
 				${until.leftCol} {
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title'
-						'headline'
-						'standfirst'
-						'media'
-						'lines'
-						'meta'
-						'body'
-						'.';
+					grid-template-columns: 100%;
+					grid-template-areas: ${topHat === 'fullWidth'
+						? `'media'
+						   'title'
+						   'headline'
+						   'standfirst'
+						   'lines'
+						   'meta'
+						   'body'
+						   '.'`
+						: `'title'
+						   'headline'
+						   'standfirst'
+						   'media'
+						   'lines'
+						   'meta'
+						   'body'
+						   '.'`};
 				}
 
 				${until.desktop} {
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'title'
-						'headline'
-						'standfirst'
-						'media'
-						'lines'
-						'meta'
-						'body';
+					grid-template-columns: 100%;
+					grid-template-areas: ${topHat === 'fullWidth'
+						? `'media'
+						   'title'
+						   'headline'
+						   'standfirst'
+						   'lines'
+						   'meta'
+						   'body'`
+						: `'title'
+						   'headline'
+						   'standfirst'
+						   'media'
+						   'lines'
+						   'meta'
+						   'body'`};
 				}
 
 				${until.tablet} {
 					grid-column-gap: 0px;
-					grid-template-columns: 100%; /* Main content */
-					grid-template-areas:
-						'media'
-						'title'
-						'headline'
-						'standfirst'
-						'lines'
-						'meta'
-						'body';
+					grid-template-columns: 100%;
+					grid-template-areas: ${topHat === 'fullWidth'
+						? `'media'
+						   'title'
+						   'headline'
+						   'standfirst'
+						   'lines'
+						   'meta'
+						   'body'`
+						: `'media'
+						   'title'
+						   'headline'
+						   'standfirst'
+						   'lines'
+						   'meta'
+						   'body'`};
 				}
 			}
 		`}
@@ -232,6 +258,8 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 		}),
 	);
 
+	const topHat: 'regular' | 'fullWidth' = 'fullWidth';
+
 	return (
 		<>
 			{includesFullWidthElement && (
@@ -326,24 +354,39 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					<div
 						className={interactiveLegacyClasses.contentInteractive}
 					>
-						<InteractiveGrid>
-							<GridItem area="media">
-								<div css={maxWidth}>
-									<MainMedia
-										format={format}
-										elements={article.mainMediaElements}
-										host={host}
-										pageId={article.pageId}
-										webTitle={article.webTitle}
-										ajaxUrl={article.config.ajaxUrl}
-										abTests={article.config.abTests}
-										switches={article.config.switches}
-										isAdFreeUser={article.isAdFreeUser}
-										isSensitive={article.config.isSensitive}
-										editionId={article.editionId}
-										shouldHideAds={article.shouldHideAds}
-									/>
-								</div>
+						<InteractiveGrid topHat={topHat}>
+							<GridItem
+								area="media"
+								customCss={
+									topHat === 'fullWidth'
+										? css`
+												width: calc(100vw);
+												position: relative;
+												left: 50%;
+												right: 50%;
+												margin-left: -50vw;
+												margin-right: -50vw;
+												aspect-ratio: 16 / 9;
+												object-fit: cover;
+												overflow: hidden;
+										  `
+										: undefined
+								}
+							>
+								<MainMedia
+									format={format}
+									elements={article.mainMediaElements}
+									host={host}
+									pageId={article.pageId}
+									webTitle={article.webTitle}
+									ajaxUrl={article.config.ajaxUrl}
+									abTests={article.config.abTests}
+									switches={article.config.switches}
+									isAdFreeUser={article.isAdFreeUser}
+									isSensitive={article.config.isSensitive}
+									editionId={article.editionId}
+									shouldHideAds={article.shouldHideAds}
+								/>
 							</GridItem>
 							<GridItem area="title" element="aside">
 								<div