diff --git a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
index eb1fdf6a49..0e0127a45c 100644
--- a/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/AudioPlayer.tsx
@@ -8,6 +8,8 @@ import { CurrentTime, Duration } from './components/time';
 import { Volume } from './components/Volume';
 import { Wrapper } from './components/Wrapper';
 
+// ********************* ophan stuff *********************
+
 // possible events for audio in ophan
 type AudioEvents = TAudioEventType extends `audio:content:${infer E}`
 	? E
@@ -21,6 +23,21 @@ type AudioProgressEvents = Extract<
 	? N
 	: never;
 
+const reportAudioEvent = (mediaId: string, eventName: AudioEvents) => {
+	const audioEvent: AudioEvent = {
+		id: mediaId,
+		eventType: `audio:content:${eventName}`,
+	};
+
+	void getOphan('Web').then((ophan) => {
+		ophan.record({
+			audio: audioEvent,
+		});
+	});
+};
+
+// ********************* Component *********************
+
 type AudioPlayerProps = {
 	/** The audio source you want to play. */
 	src: string;
@@ -47,31 +64,6 @@ export const AudioPlayer = ({
 	showVolumeControls = true,
 	mediaId,
 }: AudioPlayerProps) => {
-	// ********************* ophan stuff *********************
-
-	// we'll send listening progress reports to ophan at these percentage points
-	// through playback (100% is handled by the 'ended' event)
-	const audioProgressEvents = useRef<Set<AudioProgressEvents>>(
-		new Set([25, 50, 75]),
-	);
-
-	// wrapper to send audio events to ophan
-	const reportAudioEvent = useCallback(
-		(eventName: AudioEvents) => {
-			const audioEvent: AudioEvent = {
-				id: mediaId,
-				eventType: `audio:content:${eventName}`,
-			};
-
-			void getOphan('Web').then((ophan) => {
-				ophan.record({
-					audio: audioEvent,
-				});
-			});
-		},
-		[mediaId],
-	);
-
 	// ********************* player *********************
 
 	// state for displaying feedback to the user
@@ -89,15 +81,15 @@ export const AudioPlayer = ({
 	// ref to the <audio /> element that handles playback
 	const audioRef = useRef<HTMLAudioElement>(null);
 
-	// ******************** events *********************
+	// ********************* ophan stuff *********************
 
-	const onWaiting = useCallback(() => {
-		setIsWaiting(true);
-	}, []);
+	// we'll send listening progress reports to ophan at these percentage points
+	// through playback (100% is handled by the 'ended' event)
+	const audioProgressEvents = useRef<Set<AudioProgressEvents>>(
+		new Set([25, 50, 75]),
+	);
 
-	const onCanPlay = useCallback(() => {
-		setIsWaiting(false);
-	}, []);
+	// ******************** events *********************
 
 	const onTimeupdate = useCallback(() => {
 		if (audioRef.current) {
@@ -115,30 +107,21 @@ export const AudioPlayer = ({
 				for (const stage of audioProgressEvents.current) {
 					if (newProgress >= stage) {
 						audioProgressEvents.current.delete(stage);
-						reportAudioEvent(String(stage) as AudioEvents);
+						reportAudioEvent(mediaId, String(stage) as AudioEvents);
 					}
 				}
 			}
 		}
-	}, [isPlaying, reportAudioEvent]);
+	}, [isPlaying, mediaId]);
 
 	const onPlay = useCallback(() => {
 		setIsPlaying(true);
 
 		if (isFirstPlay.current) {
 			isFirstPlay.current = false;
-
-			reportAudioEvent('play');
+			reportAudioEvent(mediaId, 'play');
 		}
-	}, [reportAudioEvent]);
-
-	const onPause = useCallback(() => {
-		setIsPlaying(false);
-	}, []);
-
-	const onEnded = useCallback(() => {
-		reportAudioEvent('end');
-	}, [reportAudioEvent]);
+	}, [mediaId]);
 
 	const onProgress = useCallback(() => {
 		if (audioRef.current) {
@@ -263,6 +246,12 @@ export const AudioPlayer = ({
 
 		const audio = audioRef.current;
 
+		const onPause = () => setIsPlaying(false);
+		const onEnded = () => reportAudioEvent(mediaId, 'end');
+
+		const onWaiting = () => setIsWaiting(true);
+		const onCanPlay = () => setIsWaiting(false);
+
 		audio.addEventListener('waiting', onWaiting);
 		audio.addEventListener('canplay', onCanPlay);
 		audio.addEventListener('timeupdate', onTimeupdate);
@@ -286,17 +275,7 @@ export const AudioPlayer = ({
 			audio.removeEventListener('error', onError);
 			audio.removeEventListener('progress', onProgress);
 		};
-	}, [
-		onTimeupdate,
-		onDurationChange,
-		onPlay,
-		onPause,
-		onEnded,
-		onError,
-		onWaiting,
-		onCanPlay,
-		onProgress,
-	]);
+	}, [onTimeupdate, onDurationChange, onPlay, onError, onProgress, mediaId]);
 
 	return (
 		<>
diff --git a/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx b/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx
index 1c251e0690..1fe710bea0 100644
--- a/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx
+++ b/dotcom-rendering/src/components/AudioPlayer/components/Playback.tsx
@@ -60,7 +60,7 @@ Playback.Play = ({
 } & ButtonProps) => {
 	return (
 		<button
-			aria-label="Play"
+			aria-label={isPlaying ? 'Pause' : 'Play'}
 			type="button"
 			css={[
 				buttonBaseCss,
diff --git a/dotcom-rendering/src/components/Byline.tsx b/dotcom-rendering/src/components/Byline.tsx
index d823058e93..2c1f8fdb1f 100644
--- a/dotcom-rendering/src/components/Byline.tsx
+++ b/dotcom-rendering/src/components/Byline.tsx
@@ -29,7 +29,6 @@ const bylineStyles = (size: SmallHeadlineSize, isLabs: boolean) => {
 			if (isLabs) {
 				return css`
 					${textSansItalic24};
-					font-size: 24px;
 					line-height: 24px;
 					${until.desktop} {
 						${textSansItalic24};
diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
index 0409703a94..d9186650e5 100644
--- a/dotcom-rendering/src/components/Card/Card.stories.tsx
+++ b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -30,7 +30,7 @@ const basicCardProps: CardProps = {
 	headlineText: 'Headline text',
 	trailText:
 		'The 29-year-old source behind the biggest intelligence leak in the NSA’s history explains his motives',
-	headlineSize: 'medium',
+	headlineSizes: { desktop: 'xsmall' },
 	kickerText: '',
 	webPublicationDate: new Date(Date.now() - 60 * 60 * 1000).toString(),
 	image: {
@@ -209,34 +209,35 @@ export default {
 	],
 };
 
+/** TODO : Update stories once initial chromatic check has passed on new font size scale */
 export const WithDifferentHeadlineSizes = () => {
 	return (
 		<CardGroup>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="tiny"
+					headlineSizes={{ desktop: 'tiny' }}
 					headlineText="tiny"
 				/>
 			</CardWrapper>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="small"
+					headlineSizes={{ desktop: 'xxsmall' }}
 					headlineText="small"
 				/>
 			</CardWrapper>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="medium"
+					headlineSizes={{ desktop: 'xsmall' }}
 					headlineText="medium"
 				/>
 			</CardWrapper>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					headlineSize="large"
+					headlineSizes={{ desktop: 'small' }}
 					headlineText="large"
 				/>
 			</CardWrapper>
@@ -266,7 +267,7 @@ export const WithExternalLink = () => {
 					{...basicCardProps}
 					imagePositionOnDesktop="right"
 					kickerText="Instagram"
-					headlineSize="huge"
+					headlineSizes={{ desktop: 'medium', tablet: 'small' }}
 					headlineText="Follow The Guardian now"
 					isExternalLink={true}
 				/>
@@ -1103,7 +1104,7 @@ export const WithLetterDesign = () => {
 		<CardWrapper>
 			<Card
 				{...basicCardProps}
-				headlineSize="small"
+				headlineSizes={{ desktop: 'xxsmall' }}
 				headlineText="Culture"
 				format={{
 					display: ArticleDisplay.Standard,
@@ -1122,7 +1123,7 @@ export const WithLetterDesignAndShowQuotedHeadline = () => {
 		<CardWrapper>
 			<Card
 				{...basicCardProps}
-				headlineSize="small"
+				headlineSizes={{ desktop: 'xxsmall' }}
 				headlineText="Culture"
 				showQuotedHeadline={true}
 				format={{
@@ -1372,7 +1373,7 @@ export const DynamoWithSpecialPaletteVariations = () => {
 				containerType="dynamic/package"
 				isDynamo={true}
 				kickerText="Main kicker"
-				headlineSize="huge"
+				headlineSizes={{ desktop: 'medium', tablet: 'small' }}
 				imagePositionOnDesktop="bottom"
 				imagePositionOnMobile="bottom"
 				imageSize="large"
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 33f838f1ad..f4e0bc65af 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -25,7 +25,7 @@ import type { MainMedia } from '../../types/mainMedia';
 import type { OnwardsSource } from '../../types/onwards';
 import { Avatar } from '../Avatar';
 import { CardCommentCount } from '../CardCommentCount.importable';
-import { CardHeadline } from '../CardHeadline';
+import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
 import type { AspectRatio, Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
@@ -62,9 +62,7 @@ export type Props = {
 	format: ArticleFormat;
 	absoluteServerTimes: boolean;
 	headlineText: string;
-	headlineSize?: SmallHeadlineSize;
-	headlineSizeOnMobile?: SmallHeadlineSize;
-	headlineSizeOnTablet?: SmallHeadlineSize;
+	headlineSizes?: ResponsiveFontSize;
 	showQuotedHeadline?: boolean;
 	byline?: string;
 	showByline?: boolean;
@@ -118,8 +116,6 @@ export type Props = {
 	isTagPage?: boolean;
 	/** Alows the consumer to set an aspect ratio on the image of 5:3 or 5:4 */
 	aspectRatio?: AspectRatio;
-	/** Alows the consumer to use a larger font size group for boost styling*/
-	boostedFontSizes?: boolean;
 	index?: number;
 	/** The Splash card in a flexible container gets a different visual treatment to other cards*/
 	isFlexSplash?: boolean;
@@ -267,9 +263,7 @@ export const Card = ({
 	linkTo,
 	format,
 	headlineText,
-	headlineSize,
-	headlineSizeOnMobile,
-	headlineSizeOnTablet,
+	headlineSizes,
 	showQuotedHeadline,
 	byline,
 	showByline,
@@ -313,7 +307,6 @@ export const Card = ({
 	absoluteServerTimes,
 	isTagPage = false,
 	aspectRatio,
-	boostedFontSizes,
 	index = 0,
 	isFlexSplash,
 	showTopBarDesktop = true,
@@ -544,9 +537,7 @@ export const Card = ({
 					<CardHeadline
 						headlineText={headlineText}
 						format={format}
-						size={headlineSize}
-						sizeOnMobile={headlineSizeOnMobile}
-						sizeOnTablet={headlineSizeOnTablet}
+						fontSizes={headlineSizes}
 						showQuotes={showQuotes}
 						kickerText={
 							format.design === ArticleDesign.LiveBlog &&
@@ -561,7 +552,6 @@ export const Card = ({
 						byline={byline}
 						showByline={showByline}
 						isExternalLink={isExternalLink}
-						boostedFontSizes={boostedFontSizes}
 					/>
 					{!isUndefined(starRating) ? (
 						<StarRatingComponent
@@ -665,15 +655,24 @@ export const Card = ({
 												imagePositionOnMobile={
 													imagePositionOnMobile
 												}
+												//** TODO: IMPROVE THIS MAPPING */
 												// image size defaults to small if not provided. However, if the headline size is large or greater, we want to assume the image is also large so that the play icon is correctly sized.
 												imageSize={
-													headlineSize === 'huge' ||
-													headlineSize === 'large' ||
-													headlineSize === 'ginormous'
+													[
+														'small',
+														'medium',
+														'large',
+														'xlarge',
+														'xxlarge',
+													].includes(
+														headlineSizes?.desktop ??
+															'',
+													)
 														? 'large'
 														: imageSize
 												}
 												enableAds={false}
+												aspectRatio={aspectRatio}
 											/>
 										</Island>
 									</div>
@@ -752,9 +751,7 @@ export const Card = ({
 									<CardHeadline
 										headlineText={headlineText}
 										format={format}
-										size={headlineSize}
-										sizeOnMobile={headlineSizeOnMobile}
-										sizeOnTablet={headlineSizeOnTablet}
+										fontSizes={headlineSizes}
 										showQuotes={showQuotes}
 										kickerText={
 											format.design ===
@@ -771,7 +768,6 @@ export const Card = ({
 										byline={byline}
 										showByline={showByline}
 										isExternalLink={isExternalLink}
-										boostedFontSizes={boostedFontSizes}
 									/>
 									{!isUndefined(starRating) ? (
 										<StarRatingComponent
diff --git a/dotcom-rendering/src/components/Card/components/TrailText.tsx b/dotcom-rendering/src/components/Card/components/TrailText.tsx
index de5415ad8d..25717b5dbd 100644
--- a/dotcom-rendering/src/components/Card/components/TrailText.tsx
+++ b/dotcom-rendering/src/components/Card/components/TrailText.tsx
@@ -58,10 +58,13 @@ export const TrailText = ({
 				fontStyles(trailTextSize),
 				padTop && topPadding,
 			]}
-			dangerouslySetInnerHTML={{
-				__html: text,
-			}}
-		/>
+		>
+			<div
+				dangerouslySetInnerHTML={{
+					__html: text,
+				}}
+			/>
+		</div>
 	);
 	return hideUntil ? (
 		<Hide until={hideUntil}>{trailText}</Hide>
diff --git a/dotcom-rendering/src/components/CardHeadline.stories.tsx b/dotcom-rendering/src/components/CardHeadline.stories.tsx
index 3593c10855..ed1bcebd0a 100644
--- a/dotcom-rendering/src/components/CardHeadline.stories.tsx
+++ b/dotcom-rendering/src/components/CardHeadline.stories.tsx
@@ -9,7 +9,7 @@ import {
 	Pillar,
 } from '../lib/articleFormat';
 import type { DCRContainerPalette } from '../types/front';
-import { CardHeadline } from './CardHeadline';
+import { CardHeadline, type HeadlineSize } from './CardHeadline';
 import { ContainerOverrides } from './ContainerOverrides';
 import { Section } from './Section';
 
@@ -18,12 +18,16 @@ export default {
 	title: 'Components/CardHeadline',
 };
 
-const smallHeadlineSizes: SmallHeadlineSize[] = [
-	'ginormous',
-	'huge',
+const headlineSize: HeadlineSize[] = [
+	'xxxlarge',
+	'xxlarge',
+	'xlarge',
 	'large',
 	'medium',
 	'small',
+	'xsmall',
+	'xxsmall',
+	'xxxsmall',
 	'tiny',
 ];
 
@@ -48,7 +52,7 @@ Article.decorators = [
 
 export const Analysis: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -63,7 +67,7 @@ export const Analysis: StoryObj = ({ format }: StoryProps) => (
 						'Unknown'
 					} card headline looks`}
 					format={format}
-					size={size}
+					fontSizes={{ desktop: size }}
 				/>
 			</Section>
 		))}
@@ -126,7 +130,7 @@ Feature.decorators = [
 
 export const Size: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -137,7 +141,7 @@ export const Size: StoryObj = ({ format }: StoryProps) => (
 				<CardHeadline
 					headlineText={`This is how a ${size} card headline looks`}
 					format={format}
-					size={size}
+					fontSizes={{ desktop: size }}
 				/>
 			</Section>
 		))}
@@ -156,7 +160,7 @@ Size.decorators = [
 
 export const MobileSize: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -167,8 +171,10 @@ export const MobileSize: StoryObj = ({ format }: StoryProps) => (
 				<CardHeadline
 					headlineText={`This is how a mobile ${size} card headline looks`}
 					format={format}
-					size="medium"
-					sizeOnMobile={size}
+					fontSizes={{
+						desktop: 'xsmall',
+						tablet: size,
+					}}
 				/>
 			</Section>
 		))}
@@ -280,7 +286,7 @@ export const Opinion: StoryObj = ({ format }: StoryProps) => (
 			headlineText="This is how small card headline for opinion articles look"
 			format={format}
 			showQuotes={true}
-			size="small"
+			fontSizes={{ desktop: 'xxsmall' }}
 		/>
 	</Section>
 );
@@ -297,7 +303,7 @@ Opinion.decorators = [
 
 export const OpinionKicker: StoryObj = ({ format }: StoryProps) => (
 	<>
-		{smallHeadlineSizes.map((size) => (
+		{headlineSize.map((size) => (
 			<Section
 				key={size}
 				fullWidth={true}
@@ -310,7 +316,7 @@ export const OpinionKicker: StoryObj = ({ format }: StoryProps) => (
 					format={format}
 					showQuotes={true}
 					kickerText="George Monbiot"
-					size={size}
+					fontSizes={{ desktop: size }}
 				/>
 			</Section>
 		))}
diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx
index 5fa6f36693..1be533123b 100644
--- a/dotcom-rendering/src/components/CardHeadline.tsx
+++ b/dotcom-rendering/src/components/CardHeadline.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import {
 	between,
-	from,
 	headlineMedium14,
+	headlineMedium15,
 	headlineMedium17,
 	headlineMedium20,
 	headlineMedium24,
@@ -11,7 +11,6 @@ import {
 	headlineMedium42,
 	headlineMedium50,
 	headlineMedium64,
-	space,
 	textSans12,
 	textSans14,
 	textSans15,
@@ -35,11 +34,7 @@ type Props = {
 	showPulsingDot?: boolean;
 	hasInlineKicker?: boolean;
 	showQuotes?: boolean; // Even with design !== Comment, a piece can be opinion
-	size?: SmallHeadlineSize;
-	sizeOnMobile?: SmallHeadlineSize;
-	sizeOnTablet?: SmallHeadlineSize;
-	/* Controls which font size group to use, regular or boosted. Each group maps internally to the smallHeadlineSize type*/
-	boostedFontSizes?: boolean;
+	fontSizes?: ResponsiveFontSize;
 	byline?: string;
 	showByline?: boolean;
 	linkTo?: string; // If provided, the headline is wrapped in a link
@@ -48,177 +43,74 @@ type Props = {
 	isHighlights?: boolean;
 };
 
-/** These represent a new set of fonts. They are extra large font sizes that, as a group, are only used on headlines */
-const boostedFontStyles = ({ size }: { size: SmallHeadlineSize }) => {
-	switch (size) {
-		case 'ginormous':
-			return `${headlineMedium64}`;
-		case 'huge':
-			return `${headlineMedium50}`;
-		case 'large':
-			return `${headlineMedium42}`;
-		case 'medium':
-			return `${headlineMedium34}`;
-		case 'small':
-			return `${headlineMedium28}`;
-		case 'tiny':
-			return `${headlineMedium24}`;
-	}
+const headlineSize = {
+	xxxlarge: headlineMedium64,
+	xxlarge: headlineMedium50,
+	xlarge: headlineMedium42,
+	large: headlineMedium34,
+	medium: headlineMedium28,
+	small: headlineMedium24,
+	xsmall: headlineMedium20,
+	xxsmall: headlineMedium17,
+	xxxsmall: headlineMedium15,
+	tiny: headlineMedium14,
 };
 
-const fontStyles = ({
-	size,
-	boostedFontSizes,
-}: {
-	size: SmallHeadlineSize;
-	boostedFontSizes: boolean;
-}) => {
-	if (boostedFontSizes) return boostedFontStyles({ size });
+const textSansSize = {
+	xxxlarge: textSans20,
+	xxlarge: textSans20,
+	xlarge: textSans20,
+	large: textSans20,
+	medium: textSans20,
+	small: textSans20,
+	xsmall: textSans20,
+	xxsmall: textSans17,
+	xxxsmall: textSans15,
+	tiny: textSans12,
+};
 
-	switch (size) {
-		case 'ginormous':
-			return css`
-				${from.desktop} {
-					${headlineMedium50}
-				}
-			`;
-		case 'huge':
-			return css`
-				${headlineMedium28}
-			`;
-		case 'large':
-			return css`
-				${headlineMedium24}
-			`;
-		case 'medium':
-			return css`
-				${headlineMedium20}
-			`;
-		case 'small':
-			return css`
-				${headlineMedium17}
-			`;
-		case 'tiny':
-			return css`
-				${headlineMedium14}
-			`;
-	}
+export type HeadlineSize = keyof typeof headlineSize;
+export type TextSansSize = keyof typeof textSansSize;
+
+export type ResponsiveFontSize = {
+	desktop: HeadlineSize;
+	tablet?: HeadlineSize;
+	mobile?: HeadlineSize;
+	mobileMedium?: HeadlineSize;
 };
-const fontStylesOnTablet = ({
-	size,
-	boostedFontSizes,
-}: {
-	size?: SmallHeadlineSize;
-	boostedFontSizes: boolean;
-}) => {
-	/* Currently, tablet-specific headline sizing only applies to boosted fonts where a tablet font size has been supplied */
-	if (size && boostedFontSizes) {
-		return css`
-			${between.tablet.and.desktop} {
-				${boostedFontStyles({ size })}
+
+const getFontSize = (
+	sizes: ResponsiveFontSize,
+	family: 'headline' | 'textSans',
+) => {
+	const { desktop, tablet, mobileMedium, mobile } = sizes;
+
+	const fontSize = family === 'headline' ? headlineSize : textSansSize;
+
+	return css`
+		${fontSize[desktop]};
+
+		${tablet &&
+		css`
+			${until.desktop} {
+				${fontSize[tablet]};
 			}
-		`;
-	}
-	return null;
-};
+		`}
 
-const fontStylesOnMobile = ({
-	size,
-	boostedFontSizes,
-}: {
-	size: SmallHeadlineSize;
-	boostedFontSizes: boolean;
-}) => {
-	if (boostedFontSizes) {
-		return css`
+		${mobile &&
+		css`
 			${until.tablet} {
-				${boostedFontStyles({ size })}
+				${fontSize[mobile]};
 			}
-		`;
-	}
+		`}
 
-	switch (size) {
-		case 'ginormous':
-			return css`
-				${until.mobileLandscape} {
-					${headlineMedium34}
-				}
-				${between.mobileLandscape.and.desktop} {
-					${headlineMedium42}
-				}
-			`;
-		case 'huge':
-			return css`
-				${until.desktop} {
-					${headlineMedium24}
-				}
-			`;
-		case 'large':
-			return css`
-				${until.desktop} {
-					${headlineMedium20}
-				}
-			`;
-		case 'medium':
-			return css`
-				${until.desktop} {
-					${headlineMedium17}
-				}
-			`;
-		case 'small':
-			return css`
-				${until.mobileMedium} {
-					${headlineMedium14}
-				}
-				${between.mobileMedium.and.desktop} {
-					${headlineMedium17}
-				}
-			`;
-		default:
-			return undefined;
-	}
-};
-
-const labTextStyles = (size: SmallHeadlineSize) => {
-	switch (size) {
-		case 'ginormous':
-		case 'huge':
-		case 'large':
-			return css`
-				${textSans20};
-				${until.desktop} {
-					${textSans17};
-				}
-			`;
-		case 'medium':
-			return css`
-				${textSans20};
-				/**
-				 * Typography preset styles should not be overridden.
-				 * This has been done because the styles do not directly map to the new presets.
-				 * Please speak to your team's designer and update this to use a more appropriate preset.
-				 */
-				line-height: 1.15;
-				${until.desktop} {
-					${textSans17};
-					/**
-					 * Typography preset styles should not be overridden.
-					 * This has been done because the styles do not directly map to the new presets.
-					 * Please speak to your team's designer and update this to use a more appropriate preset.
-					 */
-					line-height: 1.15;
-				}
-				padding-bottom: ${space[1]}px;
-			`;
-		case 'small':
-			return css`
-				${textSans15};
-			`;
-		case 'tiny':
-			return css`
-				${textSans12};
-			`;
-	}
+		${mobileMedium &&
+		css`
+			${between.mobileMedium.and.tablet} {
+				${fontSize[mobileMedium]};
+			}
+		`}
+	`;
 };
 
 const sublinkStyles = css`
@@ -263,6 +155,29 @@ export const WithLink = ({
 	return <>{children}</>;
 };
 
+/**
+ * The Byline component uses a different type to determine font sizes but infers the size from the desktop headline size.
+ * This function converts the headline size to the appropriate byline size.
+ */
+const getBylineFontSizes = (size: HeadlineSize): SmallHeadlineSize => {
+	switch (size) {
+		case 'xxlarge':
+			return 'ginormous';
+		case 'medium':
+			return 'huge';
+		case 'small':
+			return 'large';
+		case 'xsmall':
+			return 'medium';
+		case 'xxsmall':
+			return 'small';
+		case 'tiny':
+			return 'tiny';
+		default:
+			return 'medium';
+	}
+};
+
 export const CardHeadline = ({
 	headlineText,
 	format,
@@ -270,10 +185,8 @@ export const CardHeadline = ({
 	kickerText,
 	showPulsingDot,
 	hasInlineKicker,
-	size = 'medium',
-	sizeOnMobile,
-	sizeOnTablet,
-	boostedFontSizes = false,
+	/** headline medium 20 on desktop and headline medium 17 on tablet and mobile */
+	fontSizes = { desktop: 'xsmall', tablet: 'xxsmall', mobile: 'xxsmall' },
 	byline,
 	showByline,
 	linkTo,
@@ -287,6 +200,13 @@ export const CardHeadline = ({
 	// The link is only applied directly to the headline if it is a sublink
 	const isSublink = !!linkTo;
 
+	const fonts =
+		format.theme === ArticleSpecial.Labs
+			? getFontSize(fontSizes, 'textSans')
+			: getFontSize(fontSizes, 'headline');
+
+	const bylineSize = getBylineFontSizes(fontSizes.desktop);
+
 	return (
 		<WithLink linkTo={linkTo}>
 			<h3
@@ -294,25 +214,11 @@ export const CardHeadline = ({
 					isSublink ? 'card-sublink-headline' : 'card-headline'
 				}`}
 				css={[
-					format.theme !== ArticleSpecial.Labs &&
-						fontStylesOnMobile({
-							size: sizeOnMobile ?? size,
-							boostedFontSizes,
-						}),
-
-					format.theme !== ArticleSpecial.Labs &&
-						fontStylesOnTablet({
-							size: sizeOnTablet,
-							boostedFontSizes,
-						}),
-					format.theme === ArticleSpecial.Labs
-						? labTextStyles(size)
-						: fontStyles({ size, boostedFontSizes }),
-					isSublink &&
-						size === 'tiny' &&
-						css`
-							${textSans14}
-						`,
+					isSublink
+						? css`
+								${textSans14}
+						  `
+						: fonts,
 				]}
 			>
 				{!!kickerText && (
@@ -350,7 +256,7 @@ export const CardHeadline = ({
 				<Byline
 					text={byline}
 					isLabs={format.theme === ArticleSpecial.Labs}
-					size={size}
+					size={bylineSize}
 				/>
 			)}
 		</WithLink>
diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx
index 14dc8bb079..e4e497db32 100644
--- a/dotcom-rendering/src/components/DecideContainer.tsx
+++ b/dotcom-rendering/src/components/DecideContainer.tsx
@@ -27,7 +27,8 @@ import { FlexibleSpecial } from './FlexibleSpecial';
 import { Island } from './Island';
 import { NavList } from './NavList';
 import { ScrollableHighlights } from './ScrollableHighlights.importable';
-import { ScrollableSmall } from './ScrollableSmall';
+import { ScrollableMedium } from './ScrollableMedium.importable';
+import { ScrollableSmall } from './ScrollableSmall.importable';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -252,16 +253,30 @@ export const DecideContainer = ({
 			);
 		case 'scrollable/small':
 			return (
-				<ScrollableSmall
-					trails={trails}
-					imageLoading={imageLoading}
-					containerType={'scrollable/small'}
-					containerPalette={containerPalette}
-					showAge={showAge}
-					absoluteServerTimes={absoluteServerTimes}
-				/>
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<ScrollableSmall
+						trails={trails}
+						imageLoading={imageLoading}
+						containerType={'scrollable/small'}
+						containerPalette={containerPalette}
+						showAge={showAge}
+						absoluteServerTimes={absoluteServerTimes}
+					/>
+				</Island>
 			);
 		case 'scrollable/medium':
+			return (
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<ScrollableMedium
+						trails={trails}
+						imageLoading={imageLoading}
+						containerType={'scrollable/small'}
+						containerPalette={containerPalette}
+						showAge={showAge}
+						absoluteServerTimes={absoluteServerTimes}
+					/>
+				</Island>
+			);
 		case 'scrollable/feature':
 		case 'static/feature/2':
 		case 'static/medium/4':
diff --git a/dotcom-rendering/src/components/DynamicPackage.tsx b/dotcom-rendering/src/components/DynamicPackage.tsx
index 813d52555f..24c339a16b 100644
--- a/dotcom-rendering/src/components/DynamicPackage.tsx
+++ b/dotcom-rendering/src/components/DynamicPackage.tsx
@@ -52,8 +52,10 @@ const Snap100 = ({
 					containerType="dynamic/package"
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
-					headlineSize="large"
-					headlineSizeOnMobile="medium"
+					headlineSizes={{
+						desktop: 'small',
+						tablet: 'xxsmall',
+					}}
 					imagePositionOnDesktop="right"
 					imagePositionOnMobile="left"
 					imageSize="medium"
@@ -91,7 +93,15 @@ const Card100 = ({
 					containerType="dynamic/package"
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
-					headlineSize={cards[0].isBoosted ? 'ginormous' : 'huge'}
+					headlineSizes={
+						cards[0].isBoosted
+							? {
+									desktop: 'xxlarge',
+									tablet: 'xlarge',
+									mobile: 'large',
+							  }
+							: { desktop: 'medium', tablet: 'small' }
+					}
 					imagePositionOnDesktop="bottom"
 					imagePositionOnMobile="bottom"
 					imageSize="large"
@@ -133,8 +143,7 @@ const Card75_Card25 = ({
 						containerType="dynamic/package"
 						showAge={showAge}
 						absoluteServerTimes={absoluteServerTimes}
-						headlineSize="large"
-						headlineSizeOnMobile="huge"
+						headlineSizes={{ desktop: 'small' }}
 						imagePositionOnDesktop="right"
 						imagePositionOnMobile="bottom"
 						imageSize="medium"
@@ -453,7 +462,7 @@ const Card75_ColumnOfCards25 = ({
 						containerType="dynamic/package"
 						showAge={showAge}
 						absoluteServerTimes={absoluteServerTimes}
-						headlineSize="huge"
+						headlineSizes={{ desktop: 'medium', tablet: 'small' }}
 						imagePositionOnDesktop="bottom"
 						imagePositionOnMobile="bottom"
 						imageSize="large"
@@ -489,11 +498,14 @@ const Card75_ColumnOfCards25 = ({
 									image={
 										shouldShowImage ? card.image : undefined
 									}
-									headlineSize={
+									headlineSizes={
 										cardIndex === 0 ||
 										remaining.length === 2
-											? 'medium'
-											: 'small'
+											? {
+													desktop: 'xsmall',
+													tablet: 'xxsmall',
+											  }
+											: { desktop: 'xxsmall' }
 									}
 									supportingContent={limitSupportingContent(
 										card,
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx b/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx
index 8f6aed62e5..7c421a2b31 100644
--- a/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx
+++ b/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx
@@ -54,7 +54,7 @@ export const FixedSmallSlowVThird = ({
 									containerPalette={containerPalette}
 									showAge={showAge}
 									absoluteServerTimes={absoluteServerTimes}
-									headlineSize="small"
+									headlineSizes={{ desktop: 'xxsmall' }}
 									imagePositionOnDesktop="left"
 									imagePositionOnMobile="none"
 									imageSize="small"
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
index c915ef7ef8..65149dc73d 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -13,6 +13,7 @@ import type {
 import { LI } from './Card/components/LI';
 import type { TrailTextSize } from './Card/components/TrailText';
 import { UL } from './Card/components/UL';
+import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FrontCard } from './FrontCard';
 import type { Alignment } from './SupportingContent';
@@ -68,9 +69,7 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
 };
 
 type BoostedSplashProperties = {
-	headlineSize: SmallHeadlineSize;
-	headlineSizeOnMobile: SmallHeadlineSize;
-	headlineSizeOnTablet: SmallHeadlineSize;
+	headlineSizes: ResponsiveFontSize;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	imageSize: ImageSizeType;
@@ -87,12 +86,15 @@ const decideSplashCardProperties = (
 	supportingContentLength: number,
 ): BoostedSplashProperties => {
 	switch (boostLevel) {
+		// boostedfont sizing
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
 			return {
-				headlineSize: 'small',
-				headlineSizeOnMobile: 'small',
-				headlineSizeOnTablet: 'small',
+				headlineSizes: {
+					desktop: 'medium',
+					tablet: 'medium',
+					mobile: 'medium',
+				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'large',
@@ -103,9 +105,11 @@ const decideSplashCardProperties = (
 			};
 		case 'boost':
 			return {
-				headlineSize: 'medium',
-				headlineSizeOnMobile: 'medium',
-				headlineSizeOnTablet: 'medium',
+				headlineSizes: {
+					desktop: 'large',
+					tablet: 'large',
+					mobile: 'large',
+				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
@@ -116,9 +120,11 @@ const decideSplashCardProperties = (
 			};
 		case 'megaboost':
 			return {
-				headlineSize: 'large',
-				headlineSizeOnMobile: 'large',
-				headlineSizeOnTablet: 'large',
+				headlineSizes: {
+					desktop: 'xlarge',
+					tablet: 'xlarge',
+					mobile: 'xlarge',
+				},
 				imagePositionOnDesktop: 'bottom',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
@@ -128,9 +134,11 @@ const decideSplashCardProperties = (
 			};
 		case 'gigaboost':
 			return {
-				headlineSize: 'huge',
-				headlineSizeOnMobile: 'huge',
-				headlineSizeOnTablet: 'large',
+				headlineSizes: {
+					desktop: 'xxlarge',
+					tablet: 'xlarge',
+					mobile: 'xxlarge',
+				},
 				imagePositionOnDesktop: 'bottom',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
@@ -158,9 +166,7 @@ export const SplashCardLayout = ({
 	if (!card) return null;
 
 	const {
-		headlineSize,
-		headlineSizeOnMobile,
-		headlineSizeOnTablet,
+		headlineSizes,
 		imagePositionOnDesktop,
 		imagePositionOnMobile,
 		imageSize,
@@ -184,9 +190,7 @@ export const SplashCardLayout = ({
 					containerType="flexible/general"
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
-					headlineSize={headlineSize}
-					headlineSizeOnMobile={headlineSizeOnMobile}
-					headlineSizeOnTablet={headlineSizeOnTablet}
+					headlineSizes={headlineSizes}
 					imagePositionOnDesktop={imagePositionOnDesktop}
 					imagePositionOnMobile={imagePositionOnMobile}
 					imageSize={imageSize}
@@ -202,7 +206,6 @@ export const SplashCardLayout = ({
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
 					liveUpdatesAlignment={liveUpdatesAlignment}
-					boostedFontSizes={true}
 					isFlexSplash={true}
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
@@ -214,9 +217,7 @@ export const SplashCardLayout = ({
 };
 
 type BoostedCardProperties = {
-	headlineSize: SmallHeadlineSize;
-	headlineSizeOnMobile: SmallHeadlineSize;
-	headlineSizeOnTablet: SmallHeadlineSize;
+	headlineSizes: ResponsiveFontSize;
 	imageSize: ImageSizeType;
 	liveUpdatesPosition: Position;
 	supportingContentAlignment: Alignment;
@@ -231,9 +232,11 @@ const decideCardProperties = (
 	switch (boostLevel) {
 		case 'megaboost':
 			return {
-				headlineSize: 'small',
-				headlineSizeOnMobile: 'small',
-				headlineSizeOnTablet: 'tiny',
+				headlineSizes: {
+					desktop: 'medium',
+					tablet: 'small',
+					mobile: 'medium',
+				},
 				imageSize: 'jumbo',
 				liveUpdatesPosition: 'outer',
 				supportingContentAlignment: 'horizontal',
@@ -241,9 +244,11 @@ const decideCardProperties = (
 		case 'boost':
 		default:
 			return {
-				headlineSize: 'tiny',
-				headlineSizeOnMobile: 'tiny',
-				headlineSizeOnTablet: 'tiny',
+				headlineSizes: {
+					desktop: 'small',
+					tablet: 'small',
+					mobile: 'small',
+				},
 				imageSize: 'medium',
 				liveUpdatesPosition: 'inner',
 				supportingContentAlignment: 'horizontal',
@@ -268,9 +273,7 @@ export const BoostedCardLayout = ({
 	if (!card) return null;
 
 	const {
-		headlineSize,
-		headlineSizeOnMobile,
-		headlineSizeOnTablet,
+		headlineSizes,
 		imageSize,
 		supportingContentAlignment,
 		liveUpdatesPosition,
@@ -287,9 +290,7 @@ export const BoostedCardLayout = ({
 					containerType="flexible/general"
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
-					headlineSize={headlineSize}
-					headlineSizeOnMobile={headlineSizeOnMobile}
-					headlineSizeOnTablet={headlineSizeOnTablet}
+					headlineSizes={headlineSizes}
 					imagePositionOnDesktop={'right'}
 					imagePositionOnMobile={'bottom'}
 					imageSize={imageSize}
@@ -307,7 +308,6 @@ export const BoostedCardLayout = ({
 					liveUpdatesAlignment="horizontal"
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
-					boostedFontSizes={true}
 					liveUpdatesPosition={liveUpdatesPosition}
 				/>
 			</LI>
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
index 0b8c6a6399..8cd7b3eb67 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -11,6 +11,7 @@ import type {
 import { LI } from './Card/components/LI';
 import type { TrailTextSize } from './Card/components/TrailText';
 import { UL } from './Card/components/UL';
+import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FrontCard } from './FrontCard';
 import type { Alignment } from './SupportingContent';
@@ -24,9 +25,7 @@ type Props = {
 };
 
 type BoostProperties = {
-	headlineSize: SmallHeadlineSize;
-	headlineSizeOnMobile: SmallHeadlineSize;
-	headlineSizeOnTablet: SmallHeadlineSize;
+	headlineSizes: ResponsiveFontSize;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	imageSize: ImageSizeType;
@@ -46,9 +45,11 @@ const determineCardProperties = (
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
 			return {
-				headlineSize: 'large',
-				headlineSizeOnMobile: 'small',
-				headlineSizeOnTablet: 'medium',
+				headlineSizes: {
+					desktop: 'xlarge',
+					tablet: 'large',
+					mobile: 'medium',
+				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'large',
@@ -60,9 +61,11 @@ const determineCardProperties = (
 
 		case 'boost':
 			return {
-				headlineSize: 'huge',
-				headlineSizeOnMobile: 'medium',
-				headlineSizeOnTablet: 'large',
+				headlineSizes: {
+					desktop: 'xxlarge',
+					tablet: 'xlarge',
+					mobile: 'large',
+				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
@@ -73,9 +76,11 @@ const determineCardProperties = (
 			};
 		case 'megaboost':
 			return {
-				headlineSize: 'huge',
-				headlineSizeOnMobile: 'large',
-				headlineSizeOnTablet: 'large',
+				headlineSizes: {
+					desktop: 'xxlarge',
+					tablet: 'xlarge',
+					mobile: 'xlarge',
+				},
 				imagePositionOnDesktop: 'bottom',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
@@ -85,9 +90,11 @@ const determineCardProperties = (
 			};
 		case 'gigaboost':
 			return {
-				headlineSize: 'ginormous',
-				headlineSizeOnMobile: 'huge',
-				headlineSizeOnTablet: 'huge',
+				headlineSizes: {
+					desktop: 'xxxlarge',
+					tablet: 'xxlarge',
+					mobile: 'xxlarge',
+				},
 				imagePositionOnDesktop: 'bottom',
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
@@ -114,9 +121,7 @@ export const OneCardLayout = ({
 	if (!card) return null;
 
 	const {
-		headlineSize,
-		headlineSizeOnMobile,
-		headlineSizeOnTablet,
+		headlineSizes,
 		imagePositionOnDesktop,
 		imagePositionOnMobile,
 		imageSize,
@@ -136,9 +141,7 @@ export const OneCardLayout = ({
 					containerType="flexible/special"
 					showAge={showAge}
 					absoluteServerTimes={absoluteServerTimes}
-					headlineSize={headlineSize}
-					headlineSizeOnMobile={headlineSizeOnMobile}
-					headlineSizeOnTablet={headlineSizeOnTablet}
+					headlineSizes={headlineSizes}
 					imagePositionOnDesktop={imagePositionOnDesktop}
 					imagePositionOnMobile={imagePositionOnMobile}
 					imageSize={imageSize}
@@ -150,7 +153,6 @@ export const OneCardLayout = ({
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
 					liveUpdatesAlignment={liveUpdatesAlignment}
-					boostedFontSizes={true}
 					isFlexSplash={true}
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
index 20c7a9d991..f0cf8cd0c6 100644
--- a/dotcom-rendering/src/components/MaintainAspectRatio.tsx
+++ b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
@@ -1,29 +1,42 @@
 import { css } from '@emotion/react';
+import type { AspectRatio } from './CardPicture';
 
 type Props = {
 	height: number;
 	width: number;
+	aspectRatio?: AspectRatio;
 	children: React.ReactNode;
 };
 
-export const MaintainAspectRatio = ({ height, width, children }: Props) => (
+export const MaintainAspectRatio = ({
+	height,
+	width,
+	aspectRatio,
+	children,
+}: Props) => {
 	/* https://css-tricks.com/aspect-ratio-boxes/ */
-	<div
-		css={css`
-			/* position relative to contain the absolutely positioned iframe plus any Overlay image */
-			position: relative;
-			padding-bottom: ${(height / width) * 100}%;
+	const paddingBottom =
+		aspectRatio === '5:4'
+			? `${(4 / 5) * 100}%`
+			: `${(height / width) * 100}%`;
 
-			& > iframe,
-			& > video {
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
-		`}
-	>
-		{children}
-	</div>
-);
+	return (
+		<div
+			css={css`
+				/* position relative to contain the absolutely positioned iframe plus any Overlay image */
+				position: relative;
+				padding-bottom: ${paddingBottom};
+				& > iframe,
+				& > video {
+					width: 100%;
+					height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			`}
+		>
+			{children}
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
index 9f0aab3f72..607e5d2e65 100644
--- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
+++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
@@ -152,8 +152,12 @@ export const HighlightsCard = ({
 					<CardHeadline
 						headlineText={headlineText}
 						format={format}
-						size="medium"
-						sizeOnMobile="small"
+						fontSizes={{
+							desktop: 'xsmall',
+							tablet: 'xxsmall',
+							mobileMedium: 'xxsmall',
+							mobile: 'tiny',
+						}}
 						showPulsingDot={
 							format.design === ArticleDesign.LiveBlog
 						}
diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx
index 94fae895d6..70f27577fc 100644
--- a/dotcom-rendering/src/components/Picture.tsx
+++ b/dotcom-rendering/src/components/Picture.tsx
@@ -16,7 +16,10 @@ import type { Loading } from './CardPicture';
 
 export type Orientation = 'portrait' | 'landscape';
 
-type PictureRoleType = RoleType | 'podcastCover';
+type PictureRoleType =
+	| RoleType
+	// Custom image role types that are used but do not come from CAPI / FE
+	| 'podcastCover';
 
 type Props = {
 	role: PictureRoleType;
diff --git a/dotcom-rendering/src/components/ScrollableCarousel.Importable.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx
similarity index 98%
rename from dotcom-rendering/src/components/ScrollableCarousel.Importable.tsx
rename to dotcom-rendering/src/components/ScrollableCarousel.tsx
index 6c024b17bc..59779aad06 100644
--- a/dotcom-rendering/src/components/ScrollableCarousel.Importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableCarousel.tsx
@@ -153,10 +153,6 @@ const generateCarouselColumnStyles = (totalCards: number) => {
 
 /**
  * A component used in the carousel fronts containers (e.g. small/medium/feature)
- *
- *  ## Why does this need to be an Island?
- *
- * The carouselling arrow buttons need to run javascript.
  */
 export const ScrollableCarousel = ({ children, carouselLength }: Props) => {
 	const carouselRef = useRef<HTMLOListElement | null>(null);
diff --git a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
new file mode 100644
index 0000000000..2bce73f1aa
--- /dev/null
+++ b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
@@ -0,0 +1,99 @@
+import { css } from '@emotion/react';
+import { from } from '@guardian/source/foundations';
+import { palette } from '../palette';
+import type {
+	DCRContainerPalette,
+	DCRContainerType,
+	DCRFrontCard,
+} from '../types/front';
+import { FrontCard } from './FrontCard';
+import { ScrollableCarousel } from './ScrollableCarousel';
+
+type Props = {
+	trails: DCRFrontCard[];
+	containerPalette?: DCRContainerPalette;
+	showAge?: boolean;
+	absoluteServerTimes?: boolean;
+	imageLoading: 'lazy' | 'eager';
+	containerType: DCRContainerType;
+};
+
+const itemStyles = css`
+	scroll-snap-align: start;
+	grid-area: span 1;
+	position: relative;
+`;
+
+const verticalLineStyles = css`
+	:not(:last-child)::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -10px;
+		width: 1px;
+		background-color: ${palette('--card-border-top')};
+		transform: translateX(-50%);
+	}
+	${from.leftCol} {
+		:first-child::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -10px;
+			width: 1px;
+			background-color: ${palette('--card-border-top')};
+			transform: translateX(-50%);
+		}
+	}
+`;
+
+/**
+ * A container used on fronts to display a carousel of small cards
+ *
+ * ## Why does this need to be an Island?
+ *
+ * The carouselling arrow buttons need to run javascript.
+ */
+export const ScrollableMedium = ({
+	trails,
+	containerPalette,
+	containerType,
+	absoluteServerTimes,
+	imageLoading,
+	showAge,
+}: Props) => {
+	return (
+		<ScrollableCarousel carouselLength={trails.length}>
+			{trails.map((trail) => {
+				return (
+					<li key={trail.url} css={[itemStyles, verticalLineStyles]}>
+						<FrontCard
+							trail={trail}
+							imageLoading={imageLoading}
+							absoluteServerTimes={!!absoluteServerTimes}
+							containerPalette={containerPalette}
+							containerType={containerType}
+							showAge={!!showAge}
+							headlineSizes={{
+								desktop: 'xsmall',
+								tablet: 'xxsmall',
+							}}
+							imagePositionOnDesktop="bottom"
+							imagePositionOnMobile="bottom"
+							imageSize="small" // TODO - needs fixed width images
+							trailText={undefined} // unsupported
+							supportingContent={undefined} // unsupported
+							aspectRatio="5:4"
+							kickerText={trail.kickerText}
+							showLivePlayable={trail.showLivePlayable}
+							showTopBarDesktop={false}
+							showTopBarMobile={false}
+						/>
+					</li>
+				);
+			})}
+		</ScrollableCarousel>
+	);
+};
diff --git a/dotcom-rendering/src/components/ScrollableMedium.stories.tsx b/dotcom-rendering/src/components/ScrollableMedium.stories.tsx
new file mode 100644
index 0000000000..1dcccbf9c4
--- /dev/null
+++ b/dotcom-rendering/src/components/ScrollableMedium.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
+import { trails } from '../../fixtures/manual/highlights-trails';
+import { FrontSection } from './FrontSection';
+import { ScrollableMedium } from './ScrollableMedium.importable';
+
+export default {
+	title: 'Components/ScrollableMedium',
+	component: ScrollableMedium,
+	args: {
+		trails,
+		containerPalette: undefined,
+		showAge: true,
+		absoluteServerTimes: true,
+		imageLoading: 'eager',
+		containerType: 'scrollable/medium',
+	},
+} as Meta;
+
+type Story = StoryObj<typeof ScrollableMedium>;
+
+export const Default = {};
+
+export const WithFrontSection = {
+	render: (args) => (
+		<FrontSection
+			title="Scrollable medium"
+			discussionApiUrl={discussionApiUrl}
+			editionId={'UK'}
+			showTopBorder={false}
+		>
+			<ScrollableMedium {...args} />
+		</FrontSection>
+	),
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/ScrollableSmall.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
similarity index 51%
rename from dotcom-rendering/src/components/ScrollableSmall.tsx
rename to dotcom-rendering/src/components/ScrollableSmall.importable.tsx
index f1c0da5c03..5f19275fcc 100644
--- a/dotcom-rendering/src/components/ScrollableSmall.tsx
+++ b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
@@ -7,8 +7,7 @@ import type {
 	DCRFrontCard,
 } from '../types/front';
 import { FrontCard } from './FrontCard';
-import { Island } from './Island';
-import { ScrollableCarousel } from './ScrollableCarousel.Importable';
+import { ScrollableCarousel } from './ScrollableCarousel';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -52,6 +51,10 @@ const verticalLineStyles = css`
 
 /**
  * A container used on fronts to display a carousel of small cards
+ *
+ * ## Why does this need to be an Island?
+ *
+ * The carouselling arrow buttons need to run javascript.
  */
 export const ScrollableSmall = ({
 	trails,
@@ -62,39 +65,32 @@ export const ScrollableSmall = ({
 	showAge,
 }: Props) => {
 	return (
-		<Island priority="feature" defer={{ until: 'visible' }}>
-			<ScrollableCarousel carouselLength={trails.length}>
-				{trails.map((trail) => {
-					return (
-						<li
-							key={trail.url}
-							css={[itemStyles, verticalLineStyles]}
-						>
-							<FrontCard
-								trail={trail}
-								imageLoading={imageLoading}
-								absoluteServerTimes={!!absoluteServerTimes}
-								containerPalette={containerPalette}
-								containerType={containerType}
-								showAge={!!showAge}
-								headlineSize="small"
-								headlineSizeOnMobile="small"
-								headlineSizeOnTablet="small"
-								imagePositionOnDesktop="left"
-								imagePositionOnMobile="left"
-								imageSize="small" // TODO - needs fixed width images
-								trailText={undefined} // unsupported
-								supportingContent={undefined} // unsupported
-								aspectRatio="5:4"
-								kickerText={trail.kickerText}
-								showLivePlayable={trail.showLivePlayable}
-								showTopBarDesktop={false}
-								showTopBarMobile={false}
-							/>
-						</li>
-					);
-				})}
-			</ScrollableCarousel>
-		</Island>
+		<ScrollableCarousel carouselLength={trails.length}>
+			{trails.map((trail) => {
+				return (
+					<li key={trail.url} css={[itemStyles, verticalLineStyles]}>
+						<FrontCard
+							trail={trail}
+							imageLoading={imageLoading}
+							absoluteServerTimes={!!absoluteServerTimes}
+							containerPalette={containerPalette}
+							containerType={containerType}
+							showAge={!!showAge}
+							headlineSizes={{ desktop: 'xxsmall' }}
+							imagePositionOnDesktop="left"
+							imagePositionOnMobile="left"
+							imageSize="small" // TODO - needs fixed width images
+							trailText={undefined} // unsupported
+							supportingContent={undefined} // unsupported
+							aspectRatio="5:4"
+							kickerText={trail.kickerText}
+							showLivePlayable={trail.showLivePlayable}
+							showTopBarDesktop={false}
+							showTopBarMobile={false}
+						/>
+					</li>
+				);
+			})}
+		</ScrollableCarousel>
 	);
 };
diff --git a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
index eaf4e39b6e..2007adcf27 100644
--- a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
+++ b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
@@ -3,7 +3,7 @@ import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
-import { ScrollableSmall } from './ScrollableSmall';
+import { ScrollableSmall } from './ScrollableSmall.importable';
 
 export default {
 	title: 'Components/ScrollableSmall',
diff --git a/dotcom-rendering/src/components/ShowMore.importable.tsx b/dotcom-rendering/src/components/ShowMore.importable.tsx
index 052a9d56be..8821d7f4e8 100644
--- a/dotcom-rendering/src/components/ShowMore.importable.tsx
+++ b/dotcom-rendering/src/components/ShowMore.importable.tsx
@@ -176,7 +176,9 @@ export const ShowMore = ({
 											slideshowImages={undefined}
 											containerPalette={containerPalette}
 											showAge={showAge}
-											headlineSize="small"
+											headlineSizes={{
+												desktop: 'xxsmall',
+											}}
 											imageLoading="eager"
 											absoluteServerTimes={false}
 											trailTextColour={palette(
diff --git a/dotcom-rendering/src/components/SupportingContent.stories.tsx b/dotcom-rendering/src/components/SupportingContent.stories.tsx
index 66d924395c..06065b9fb8 100644
--- a/dotcom-rendering/src/components/SupportingContent.stories.tsx
+++ b/dotcom-rendering/src/components/SupportingContent.stories.tsx
@@ -25,7 +25,6 @@ const basicCardProps: CardProps = {
 	headlineText: 'Headline text',
 	trailText:
 		'The 29-year-old source behind the biggest intelligence leak in the NSA’s history explains his motives',
-	headlineSize: 'medium',
 	kickerText: '',
 	image: {
 		src: 'https://media.guim.co.uk/6537e163c9164d25ec6102641f6a04fa5ba76560/0_0_5472_3648/master/5472.jpg',
diff --git a/dotcom-rendering/src/components/SupportingContent.tsx b/dotcom-rendering/src/components/SupportingContent.tsx
index 9362278492..055fa5c3f4 100644
--- a/dotcom-rendering/src/components/SupportingContent.tsx
+++ b/dotcom-rendering/src/components/SupportingContent.tsx
@@ -178,7 +178,6 @@ export const SupportingContent = ({
 							>
 								<CardHeadline
 									format={subLinkFormat}
-									size="tiny"
 									hasInlineKicker={true}
 									linkTo={subLink.url}
 									showPulsingDot={
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
index 0efb7bb31d..efd421a55c 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
@@ -7,6 +7,7 @@ import type {
 	ImagePositionType,
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
+import type { AspectRatio } from '../CardPicture';
 import { MaintainAspectRatio } from '../MaintainAspectRatio';
 import type { VideoCategory } from './YoutubeAtomOverlay';
 import { YoutubeAtomOverlay } from './YoutubeAtomOverlay';
@@ -51,6 +52,7 @@ export type Props = {
 	imageSize: ImageSizeType;
 	imagePositionOnMobile: ImagePositionType;
 	renderingTarget: RenderingTarget;
+	aspectRatio?: AspectRatio;
 };
 
 export const YoutubeAtom = ({
@@ -79,6 +81,7 @@ export const YoutubeAtom = ({
 	imageSize,
 	imagePositionOnMobile,
 	renderingTarget,
+	aspectRatio,
 }: Props): JSX.Element => {
 	const [overlayClicked, setOverlayClicked] = useState<boolean>(false);
 	const [playerReady, setPlayerReady] = useState<boolean>(false);
@@ -196,7 +199,11 @@ export const YoutubeAtom = ({
 				setIsClosed={setIsClosed}
 				shouldPauseOutOfView={shouldPauseOutOfView}
 			>
-				<MaintainAspectRatio height={height} width={width}>
+				<MaintainAspectRatio
+					height={height}
+					width={width}
+					aspectRatio={aspectRatio}
+				>
 					{
 						/**
 						 * Consent and ad targeting are initially undefined and set by subsequent re-renders
@@ -246,6 +253,7 @@ export const YoutubeAtom = ({
 							showTextOverlay={showTextOverlay}
 							imageSize={imageSize}
 							imagePositionOnMobile={imagePositionOnMobile}
+							aspectRatio={aspectRatio}
 						/>
 					)}
 					{showPlaceholder && (
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx
index d9c393d8c7..8a45884499 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx
@@ -15,6 +15,7 @@ import type {
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
 import { PlayIcon } from '../Card/components/PlayIcon';
+import type { AspectRatio } from '../CardPicture';
 import { FormatBoundary } from '../FormatBoundary';
 import { Kicker } from '../Kicker';
 import { secondsToDuration } from '../MediaDuration';
@@ -38,6 +39,7 @@ type Props = {
 	showTextOverlay?: boolean;
 	imageSize: ImageSizeType;
 	imagePositionOnMobile: ImagePositionType;
+	aspectRatio?: AspectRatio;
 };
 
 const overlayStyles = css`
@@ -149,6 +151,7 @@ export const YoutubeAtomOverlay = ({
 	showTextOverlay,
 	imageSize,
 	imagePositionOnMobile,
+	aspectRatio,
 }: Props) => {
 	const id = `youtube-overlay-${uniqueId}`;
 	const hasDuration = !isUndefined(duration) && duration > 0;
@@ -173,6 +176,7 @@ export const YoutubeAtomOverlay = ({
 						alt={alt}
 						height={height}
 						width={width}
+						aspectRatio={aspectRatio}
 					/>
 				)}
 				{showPill && (
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx
index b98da2d22d..d1cecddc4e 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx
@@ -8,16 +8,27 @@ type Props = {
 	alt: string;
 	height: number;
 	width: number;
+	aspectRatio?: string;
 };
 
-export const YoutubeAtomPicture = ({ image, alt, height, width }: Props) => {
-	const sources = generateSources(getSourceImageUrl(image), [
-		{ breakpoint: breakpoints.mobile, width: 465 },
-		{ breakpoint: breakpoints.mobileLandscape, width: 645 },
-		{ breakpoint: breakpoints.phablet, width: 620 },
-		{ breakpoint: breakpoints.tablet, width: 700 },
-		{ breakpoint: breakpoints.desktop, width: 620 },
-	]);
+export const YoutubeAtomPicture = ({
+	image,
+	alt,
+	height,
+	width,
+	aspectRatio,
+}: Props) => {
+	const sources = generateSources(
+		getSourceImageUrl(image),
+		[
+			{ breakpoint: breakpoints.mobile, width: 465 },
+			{ breakpoint: breakpoints.mobileLandscape, width: 645 },
+			{ breakpoint: breakpoints.phablet, width: 620 },
+			{ breakpoint: breakpoints.tablet, width: 700 },
+			{ breakpoint: breakpoints.desktop, width: 620 },
+		],
+		aspectRatio,
+	);
 	const fallbackSource = getFallbackSource(sources);
 
 	return (
diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
index eb36dd6b22..e973c46d10 100644
--- a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
+++ b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -8,6 +8,7 @@ import type {
 	ImagePositionType,
 	ImageSizeType,
 } from './Card/components/ImageWrapper';
+import type { AspectRatio } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import { ophanTrackerApps, ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';
@@ -40,6 +41,7 @@ type Props = {
 	imageSize?: ImageSizeType;
 	imagePositionOnMobile?: ImagePositionType;
 	enableAds: boolean;
+	aspectRatio?: AspectRatio;
 };
 
 /**
@@ -81,6 +83,7 @@ export const YoutubeBlockComponent = ({
 	imageSize = 'large',
 	imagePositionOnMobile = 'none',
 	enableAds,
+	aspectRatio,
 }: Props) => {
 	const [consentState, setConsentState] = useState<ConsentState | undefined>(
 		undefined,
@@ -173,6 +176,7 @@ export const YoutubeBlockComponent = ({
 				imageSize={imageSize}
 				imagePositionOnMobile={imagePositionOnMobile}
 				renderingTarget={renderingTarget}
+				aspectRatio={aspectRatio}
 			/>
 			{!hideCaption && (
 				<Caption
diff --git a/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx b/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx
index 5ac05579b1..c0fb996729 100644
--- a/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx
+++ b/dotcom-rendering/src/components/marketing/epics/BylineWithHeadshot.tsx
@@ -14,6 +14,7 @@ import type { ReactComponent } from '../lib/ReactComponent';
 
 interface BylineWithHeadshotProps {
 	bylineWithImage: BylineWithImage;
+	isColourInTestVariant: boolean;
 }
 
 const bylineWithImageContainer = css`
@@ -55,7 +56,7 @@ const bylineHeadshotImage = css`
 	object-fit: cover;
 `;
 
-const bylineBottomDecoration = css`
+const bylineBottomDecoration = (isInTestVariant: boolean) => css`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -66,8 +67,8 @@ const bylineBottomDecoration = css`
 	height: calc(0.25rem * 4 + 1px);
 	background-image: repeating-linear-gradient(
 		to bottom,
-		${palette.neutral[86]},
-		${palette.neutral[86]} 1px,
+		${isInTestVariant ? palette.neutral[0] : palette.neutral[86]},
+		${isInTestVariant ? palette.neutral[0] : palette.neutral[86]} 1px,
 		transparent 1px,
 		transparent 0.25rem
 	);
@@ -75,6 +76,7 @@ const bylineBottomDecoration = css`
 
 export const BylineWithHeadshot: ReactComponent<BylineWithHeadshotProps> = ({
 	bylineWithImage,
+	isColourInTestVariant,
 }) => {
 	const { name, description, headshot } = bylineWithImage;
 
@@ -86,7 +88,9 @@ export const BylineWithHeadshot: ReactComponent<BylineWithHeadshotProps> = ({
 			</div>
 			{headshot && (
 				<>
-					<div css={bylineBottomDecoration}></div>
+					<div
+						css={bylineBottomDecoration(isColourInTestVariant)}
+					></div>
 					<div css={bylineImageContainer}>
 						<img
 							src={headshot.mainUrl}
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx
index 058fe3d66b..653c4c8d1d 100644
--- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx
+++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx
@@ -101,6 +101,150 @@ export const WithBylineAndHeadshot: Story = {
 	},
 };
 
+export const WithBylineAndHeadshot_USEOY2024_VARIANT: Story = {
+	name: 'ContributionsEpic with byline + headshot image for US EOY 2024 VARIANT',
+	args: {
+		...meta.args,
+		tracking: {
+			...tracking,
+			abTestName: '_ARTICLE_EPIC_BG_COLOUR',
+			abTestVariant: 'VARIANT',
+		},
+		countryCode: 'US',
+		variant: {
+			...props.variant,
+			tickerSettings: {
+				endType: TickerEndType.unlimited,
+				countType: TickerCountType.money,
+				currencySymbol: '$',
+				copy: {
+					countLabel: '',
+					goalReachedPrimary: '',
+					goalReachedSecondary: '',
+				},
+				tickerData: {
+					total: 10000,
+					goal: 100000,
+				},
+				name: 'US',
+			},
+			name: 'THREE_TIER_CHOICE_CARDS',
+			cta: {
+				baseUrl: 'https://support.theguardian.com',
+				text: 'Continue',
+			},
+			showChoiceCards: true,
+			bylineWithImage: {
+				name: 'Betsy Reed',
+				description: 'Editor, Guardian US',
+				headshot: {
+					mainUrl: `https://i.guim.co.uk/img/media/6d6aec079caf868fd5948df959a82f67841d475d/0_0_1628_1317/500.png?width=400&quality=75&s=764f4aed4118b6315798444bd2911ca0`,
+					altText: 'Betsy Reed staff byline photograph',
+				},
+			},
+			heading: '',
+			paragraphs: [
+				'I hope you appreciated this article. Before you move on, I wanted to ask if you would consider supporting the Guardian’s journalism during one of the most consequential news cycles of our lifetimes. As a reader-funded organization, we need your help to hit our annual fundraising goal.',
+				'In the heat of a tumultuous presidential race, there is an urgent need for free, trustworthy journalism that foregrounds the stakes of this election for our country and planet.',
+				'Yet from Elon Musk to the Murdochs, a small number of billionaire owners have a powerful hold on so much of the information that reaches the public. The Guardian is different. We have no billionaire owner or shareholders to consider. Our journalism is produced to serve the public interest – not profit motives.',
+				'Largely because of this independence, we are able to avoid the trap that befalls much US media: the tendency, born of a desire to please all sides, to engage in false equivalence in the name of neutrality. The way we see it, our job is to be truly fair, which means listening to different points of view, but also calling out the lies of powerful people and institutions – and making clear how misinformation and demagoguery can damage democracy.',
+				'From threats to election integrity, to the spiraling climate crisis, to complex foreign conflicts, our journalists contextualize, investigate and illuminate the critical stories of our time. As a global news organization with a robust US reporting staff, we’re able to provide a fresh, outsider perspective – one so often missing in the American media bubble.',
+				'Around the world, readers can access the Guardian’s paywall-free journalism because of our unique reader-supported model. That’s because of people like you. Our readers keep us independent, beholden to no outside influence and accessible to everyone – whether they can afford to pay for news, or not.',
+				'',
+			],
+			highlightedText:
+				'If you can, please consider supporting us just once, or better yet, support us every month with a little more. Thank you.',
+			secondaryCta: {
+				type: SecondaryCtaType.ContributionsReminder,
+			},
+			showReminderFields: {
+				reminderCta: 'Remind me in November',
+				reminderPeriod: '2024-11-01',
+				reminderLabel: 'November',
+			},
+		},
+		fetchEmail: () => {
+			return new Promise((resolve) => {
+				setTimeout(() => {
+					resolve('test@guardian.co.uk');
+				}, 500);
+			});
+		},
+	},
+};
+
+export const WithBylineAndHeadshot_USEOY2024_CONTROL: Story = {
+	name: 'ContributionsEpic with byline + headshot image for US EOY 2024 CONTROL',
+	args: {
+		...meta.args,
+		tracking: {
+			...tracking,
+			abTestName: '_ARTICLE_EPIC_BG_COLOUR',
+			abTestVariant: 'CONTROL',
+		},
+		countryCode: 'US',
+		variant: {
+			...props.variant,
+			tickerSettings: {
+				endType: TickerEndType.unlimited,
+				countType: TickerCountType.money,
+				currencySymbol: '$',
+				copy: {
+					countLabel: 'Help us reach our end-of-year goal',
+					goalReachedPrimary: '',
+					goalReachedSecondary: '',
+				},
+				tickerData: {
+					total: 10000,
+					goal: 100000,
+				},
+				name: 'US',
+			},
+			name: 'THREE_TIER_CHOICE_CARDS',
+			cta: {
+				baseUrl: 'https://support.theguardian.com',
+				text: 'Continue',
+			},
+			showChoiceCards: true,
+			bylineWithImage: {
+				name: 'Betsy Reed',
+				description: 'Editor, Guardian US',
+				headshot: {
+					mainUrl:
+						'https://i.guim.co.uk/img/media/6d6aec079caf868fd5948df959a82f67841d475d/0_0_1628_1317/500.png?width=400&quality=75&s=764f4aed4118b6315798444bd2911ca0',
+					altText: 'Betsy Reed staff byline photograph',
+				},
+			},
+			heading: '',
+			paragraphs: [
+				'I hope you appreciated this article. Before you move on, I wanted to ask if you would consider supporting the Guardian’s journalism during one of the most consequential news cycles of our lifetimes. As a reader-funded organization, we need your help to hit our annual fundraising goal.',
+				'In the heat of a tumultuous presidential race, there is an urgent need for free, trustworthy journalism that foregrounds the stakes of this election for our country and planet.',
+				'Yet from Elon Musk to the Murdochs, a small number of billionaire owners have a powerful hold on so much of the information that reaches the public. The Guardian is different. We have no billionaire owner or shareholders to consider. Our journalism is produced to serve the public interest – not profit motives.',
+				'Largely because of this independence, we are able to avoid the trap that befalls much US media: the tendency, born of a desire to please all sides, to engage in false equivalence in the name of neutrality. The way we see it, our job is to be truly fair, which means listening to different points of view, but also calling out the lies of powerful people and institutions – and making clear how misinformation and demagoguery can damage democracy.',
+				'From threats to election integrity, to the spiraling climate crisis, to complex foreign conflicts, our journalists contextualize, investigate and illuminate the critical stories of our time. As a global news organization with a robust US reporting staff, we’re able to provide a fresh, outsider perspective – one so often missing in the American media bubble.',
+				'Around the world, readers can access the Guardian’s paywall-free journalism because of our unique reader-supported model. That’s because of people like you. Our readers keep us independent, beholden to no outside influence and accessible to everyone – whether they can afford to pay for news, or not.',
+			],
+			highlightedText:
+				'If you can, please consider supporting us just once, or better yet, support us every month with a little more. Thank you.',
+			secondaryCta: {
+				type: SecondaryCtaType.ContributionsReminder,
+			},
+			showReminderFields: {
+				reminderCta: 'Remind me in November',
+				reminderPeriod: '2024-11-01',
+				reminderLabel: 'November',
+			},
+		},
+		fetchEmail: () => {
+			return new Promise((resolve) => {
+				setTimeout(() => {
+					resolve('test@guardian.co.uk');
+				}, 500);
+			});
+		},
+	},
+};
+
 export const WithBylineOnly: Story = {
 	name: 'ContributionsEpic with byline only',
 	args: {
diff --git a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx
index ba597ccdba..2b9be36c98 100644
--- a/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx
+++ b/dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx
@@ -43,12 +43,31 @@ import { ContributionsEpicNewsletterSignup } from './ContributionsEpicNewsletter
 import { ContributionsEpicSignInCta } from './ContributionsEpicSignInCta';
 import { ContributionsEpicCtasContainer } from './ctas/ContributionsEpicCtasContainer';
 
+// Hard-coded AB TEST - picking up ab test name and variant name from the tracking object
+// then applying a different colour if it matches, or the default colour if it doesn't.
+const getVariantOrControlStyle = (
+	isInTestVariant: boolean,
+	variant: string,
+	control: string,
+) => {
+	return isInTestVariant ? variant : control;
+};
+
 // CSS Styling
 // -------------------------------------------
-const wrapperStyles = css`
+const wrapperStyles = (isInTestVariant: boolean) => css`
 	padding: ${space[1]}px ${space[2]}px ${space[3]}px;
-	border-top: 1px solid ${palette.brandAlt[400]};
-	background-color: ${palette.neutral[97]};
+	border-top: 1px solid
+		${getVariantOrControlStyle(
+			isInTestVariant,
+			palette.neutral[0],
+			palette.brandAlt[400],
+		)};
+	background-color: ${getVariantOrControlStyle(
+		isInTestVariant,
+		'#E2E3BF',
+		palette.neutral[97],
+	)};
 
 	* {
 		::selection {
@@ -91,9 +110,18 @@ const highlightWrapperStyles = css`
 	${linkStyles};
 `;
 
-const highlightStyles = css`
+const highlightStyles = (isInTestVariant: boolean) => css`
 	padding: 2px;
-	background-color: ${palette.brandAlt[400]};
+	background-color: ${getVariantOrControlStyle(
+		isInTestVariant,
+		'#C41C1C',
+		palette.brandAlt[400],
+	)};
+	color: ${getVariantOrControlStyle(
+		isInTestVariant,
+		palette.neutral[100],
+		palette.neutral[7],
+	)};
 `;
 
 const imageWrapperStyles = css`
@@ -117,6 +145,13 @@ const defaultTickerStylingSettings: TickerSettings['tickerStylingSettings'] = {
 	totalColour: '#5056F5',
 	goalColour: '#000000',
 };
+const usEOYTickerStylingSettings: TickerSettings['tickerStylingSettings'] = {
+	filledProgressColour: '#C41C1C',
+	progressBarBackgroundColour: 'rgba(196, 28, 28, 0.30)',
+	headlineColour: '#000000',
+	totalColour: '#C41C1C',
+	goalColour: '#000000',
+};
 
 const articleCountAboveContainerStyles = css`
 	margin-bottom: ${space[4]}px;
@@ -159,6 +194,7 @@ type HighlightedProps = {
 	numArticles: number;
 	tracking?: OphanTracking;
 	showAboveArticleCount: boolean;
+	isColourInTestVariant: boolean;
 };
 
 const Highlighted: ReactComponent<HighlightedProps> = ({
@@ -166,6 +202,7 @@ const Highlighted: ReactComponent<HighlightedProps> = ({
 	numArticles,
 	tracking,
 	showAboveArticleCount,
+	isColourInTestVariant,
 }: HighlightedProps) => {
 	const elements = replaceArticleCount(
 		highlightedText,
@@ -178,7 +215,7 @@ const Highlighted: ReactComponent<HighlightedProps> = ({
 	return (
 		<strong css={highlightWrapperStyles}>
 			{' '}
-			<span css={highlightStyles}>{elements}</span>
+			<span css={highlightStyles(isColourInTestVariant)}>{elements}</span>
 		</strong>
 	);
 };
@@ -224,6 +261,7 @@ type BodyProps = {
 	numArticles: number;
 	tracking?: OphanTracking;
 	showAboveArticleCount: boolean;
+	isColourInTestVariant: boolean;
 };
 
 const EpicBody: ReactComponent<BodyProps> = ({
@@ -232,6 +270,7 @@ const EpicBody: ReactComponent<BodyProps> = ({
 	highlightedText,
 	tracking,
 	showAboveArticleCount,
+	isColourInTestVariant,
 }: BodyProps) => {
 	return (
 		<>
@@ -249,6 +288,9 @@ const EpicBody: ReactComponent<BodyProps> = ({
 									showAboveArticleCount={
 										showAboveArticleCount
 									}
+									isColourInTestVariant={
+										isColourInTestVariant
+									}
 								/>
 							) : null
 						}
@@ -305,6 +347,10 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 	const { image, tickerSettings, choiceCardAmounts, newsletterSignup } =
 		variant;
 
+	const isColourInTestVariant: boolean =
+		tracking.abTestName.includes('_ARTICLE_EPIC_BG_COLOUR') &&
+		tracking.abTestVariant === 'VARIANT';
+
 	const { hasOptedOut, onArticleCountOptIn, onArticleCountOptOut } =
 		useArticleCountOptOut();
 
@@ -391,7 +437,7 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 	);
 
 	return (
-		<section ref={setNode} css={wrapperStyles}>
+		<section ref={setNode} css={wrapperStyles(isColourInTestVariant)}>
 			{showAboveArticleCount && (
 				<div css={articleCountAboveContainerStyles}>
 					<ContributionsEpicArticleCountAboveWithOptOut
@@ -414,7 +460,11 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 							headline: tickerSettings.copy.countLabel,
 						}}
 						tickerData={tickerSettings.tickerData}
-						tickerStylingSettings={defaultTickerStylingSettings}
+						tickerStylingSettings={
+							isColourInTestVariant
+								? usEOYTickerStylingSettings
+								: defaultTickerStylingSettings
+						}
 						size={'medium'}
 					/>
 				</div>
@@ -445,10 +495,14 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 				numArticles={articleCounts.forTargetedWeeks}
 				tracking={ophanTracking}
 				showAboveArticleCount={showAboveArticleCount}
+				isColourInTestVariant={isColourInTestVariant}
 			/>
 
 			{variant.bylineWithImage && (
-				<BylineWithHeadshot bylineWithImage={variant.bylineWithImage} />
+				<BylineWithHeadshot
+					bylineWithImage={variant.bylineWithImage}
+					isColourInTestVariant={isColourInTestVariant}
+				/>
 			)}
 
 			{newsletterSignup ? (
@@ -468,6 +522,7 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 					submitComponentEvent={submitComponentEvent}
 					amountsTestName={choiceCardAmounts?.testName}
 					amountsVariantName={choiceCardAmounts?.variantName}
+					isColourInTestVariant={isColourInTestVariant}
 				/>
 			)}
 
diff --git a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx
index 1dd8813143..a3591a0fb3 100644
--- a/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx
+++ b/dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.tsx
@@ -38,6 +38,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
 		benefitsLabel: 'All-access digital',
 		benefits: () => [
 			'Unlimited access to the Guardian app',
+			'Unlimited access to our new Feast App',
 			'Ad-free reading on all your devices',
 			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
 			'Far fewer asks for support',
@@ -71,6 +72,7 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
 		benefitsLabel: 'All-access digital',
 		benefits: () => [
 			'Unlimited access to the Guardian app',
+			'Unlimited access to our new Feast App',
 			'Ad-free reading on all your devices',
 			'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
 			'Far fewer asks for support',
diff --git a/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx b/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx
index a593d4f500..8143ab1e5c 100644
--- a/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx
+++ b/dotcom-rendering/src/components/marketing/epics/ctas/EpicButton.tsx
@@ -76,7 +76,7 @@ const tertiaryButtonOverrides = css`
 	/* stylelint-disable-next-line declaration-no-important */
 	border: 1px solid ${palette.neutral[7]} !important;
 	/* stylelint-disable-next-line declaration-no-important */
-	background-color: ${palette.neutral[100]} !important;
+	background-color: transparent !important;
 
 	:hover {
 		/* stylelint-disable-next-line declaration-no-important */
diff --git a/dotcom-rendering/src/lib/cardWrappers.tsx b/dotcom-rendering/src/lib/cardWrappers.tsx
index 014add74f5..7f0009e12c 100644
--- a/dotcom-rendering/src/lib/cardWrappers.tsx
+++ b/dotcom-rendering/src/lib/cardWrappers.tsx
@@ -61,8 +61,7 @@ export const Card100Media50 = ({
 			containerPalette={containerPalette}
 			showAge={showAge}
 			absoluteServerTimes={absoluteServerTimes}
-			headlineSize="huge"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'medium', tablet: 'xxsmall' }}
 			image={trail.image}
 			imageSize="medium"
 			imagePositionOnDesktop="right"
@@ -113,8 +112,7 @@ export const Card100Media75 = ({
 			containerPalette={containerPalette}
 			showAge={showAge}
 			absoluteServerTimes={absoluteServerTimes}
-			headlineSize="huge"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'medium', tablet: 'xsmall' }}
 			image={trail.image}
 			imageSize="jumbo"
 			imagePositionOnDesktop="right"
@@ -168,8 +166,7 @@ export const Card100Media100 = ({
 			containerPalette={containerPalette}
 			showAge={showAge}
 			absoluteServerTimes={absoluteServerTimes}
-			headlineSize="huge"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'medium', tablet: 'xsmall' }}
 			image={trail.image}
 			imagePositionOnDesktop="top"
 			imagePositionOnMobile="top"
@@ -212,8 +209,7 @@ export const Card100Media100Tall = ({
 			containerPalette={containerPalette}
 			showAge={showAge}
 			absoluteServerTimes={absoluteServerTimes}
-			headlineSize="medium"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xsmall' }}
 			image={trail.image}
 			imagePositionOnDesktop="top"
 			imagePositionOnMobile="top"
@@ -267,9 +263,8 @@ export const Card75Media50Right = ({
 			imagePositionOnMobile="top"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="large"
-			headlineSizeOnMobile="large"
 			trailTextColour={palette('--card-headline')}
+			headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
 		/>
 	);
 };
@@ -314,8 +309,7 @@ export const Card75Media50Left = ({
 			imageSize="large"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="large"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
 			trailTextColour={palette('--card-headline')}
 		/>
 	);
@@ -356,8 +350,7 @@ export const Card25Media25 = ({
 			imageSize="small"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="medium"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
 			isPlayableMediaCard={false}
 			trailTextColour={palette('--card-headline')}
 		/>
@@ -399,8 +392,7 @@ export const Card25Media25SmallHeadline = ({
 			imageSize="small"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="small"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }}
 			isPlayableMediaCard={false}
 			trailTextColour={palette('--card-headline')}
 		/>
@@ -441,8 +433,7 @@ export const Card25Media25Tall = ({
 			imageSize="small"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="medium"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
 			trailText={
 				isUndefined(trail.avatarUrl) &&
 				(isUndefined(trail.supportingContent) ||
@@ -490,8 +481,7 @@ export const Card25Media25TallNoTrail = ({
 			imageSize="small"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="medium"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
 			supportingContent={trail.supportingContent?.slice(0, 2)}
 			isPlayableMediaCard={false}
 			trailTextColour={palette('--card-headline')}
@@ -532,8 +522,7 @@ export const Card25Media25TallSmallHeadline = ({
 			imageSize="small"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="small"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }}
 			supportingContent={trail.supportingContent?.slice(0, 2)}
 			isPlayableMediaCard={false}
 			trailTextColour={palette('--card-headline')}
@@ -567,8 +556,7 @@ export const Card50Media50 = ({
 		<FrontCard
 			trail={trail}
 			containerPalette={containerPalette}
-			headlineSize="large"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
 			imageSize="medium"
 			imagePositionOnDesktop="top"
 			imagePositionOnMobile="top"
@@ -620,8 +608,7 @@ export const Card50Media50Tall = ({
 			imageSize="medium"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="large"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
 			trailTextColour={palette('--card-headline')}
 		/>
 	);
@@ -656,8 +643,7 @@ export const Card66Media66 = ({
 			showAge={showAge}
 			absoluteServerTimes={absoluteServerTimes}
 			trailText={trail.trailText}
-			headlineSize="medium"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
 			imagePositionOnDesktop="top"
 			imagePositionOnMobile="top"
 			imageSize="large"
@@ -702,9 +688,8 @@ export const Card33Media33 = ({
 			imagePositionOnMobile="left"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="medium"
-			headlineSizeOnMobile="medium"
 			trailTextColour={palette('--card-headline')}
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
 		/>
 	);
 };
@@ -741,8 +726,7 @@ export const Card33Media33Tall = ({
 			imagePositionOnMobile="left"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="medium"
-			headlineSizeOnMobile="medium"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
 			supportingContent={trail.supportingContent?.slice(0, 2)}
 			supportingContentAlignment="vertical"
 			trailTextColour={palette('--card-headline')}
@@ -784,8 +768,7 @@ export const Card33Media33MobileTopTall = ({
 			imagePositionOnMobile="top"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="medium"
-			headlineSizeOnMobile="large"
+			headlineSizes={{ desktop: 'xsmall', tablet: 'xsmall' }}
 			supportingContent={trail.supportingContent?.slice(0, 2)}
 			supportingContentAlignment="vertical"
 			trailTextColour={palette('--card-headline')}
@@ -821,7 +804,7 @@ export const CardDefault = ({
 			image={undefined}
 			imageLoading={'lazy'}
 			avatarUrl={undefined}
-			headlineSize="small"
+			headlineSizes={{ desktop: 'xxsmall' }}
 			isPlayableMediaCard={false}
 			isTagPage={isTagPage}
 			trailTextColour={palette('--card-headline')}
@@ -860,7 +843,7 @@ export const CardDefaultMedia = ({
 			imagePositionOnMobile="none"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="small"
+			headlineSizes={{ desktop: 'xxsmall' }}
 			isPlayableMediaCard={false}
 			trailTextColour={palette('--card-headline')}
 		/>
@@ -898,7 +881,7 @@ export const CardDefaultMediaMobile = ({
 			imagePositionOnMobile="left"
 			imageLoading={imageLoading}
 			isTagPage={isTagPage}
-			headlineSize="small"
+			headlineSizes={{ desktop: 'xxsmall' }}
 			isPlayableMediaCard={false}
 			trailTextColour={palette('--card-headline')}
 		/>
diff --git a/dotcom-rendering/src/model/enhanceCollections.ts b/dotcom-rendering/src/model/enhanceCollections.ts
index 87951e8869..3bd9f6e3a4 100644
--- a/dotcom-rendering/src/model/enhanceCollections.ts
+++ b/dotcom-rendering/src/model/enhanceCollections.ts
@@ -14,7 +14,6 @@ const FORBIDDEN_CONTAINERS = [
 ];
 
 const UNSUPPORTED_CONTAINERS = [
-	'scrollable/medium',
 	'scrollable/feature',
 	'static/feature/2',
 	'static/medium/4',