Use seperate grid layout for media cards

guardian · Jan 22, 2025 · 7f2e661 · 7f2e661
1 parent 00ea827
commit 7f2e661
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
@@ -8,7 +8,7 @@ import {
 } from '@guardian/source/foundations';
 import { SvgCamera } from '@guardian/source/react-components';
 import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat';
-import { isMediaCard } from '../../lib/cardHelpers';
+import { isMediaCard as isMedia } from '../../lib/cardHelpers';
 import { palette } from '../../palette';
 import type { StarRating as Rating } from '../../types/content';
 import type { DCRFrontImage } from '../../types/front';
@@ -82,6 +82,20 @@ const gridContainer = css`
 	}
 `;
 
+const mediaGrid = css`
+	grid-template-areas:
+		'image'
+		'headline'
+		'media-icon';
+
+	${from.desktop} {
+		width: 300px;
+		grid-template-areas:
+			'image headline'
+			'image media-icon';
+	}
+`;
+
 const headline = css`
 	grid-area: headline;
 `;
@@ -175,7 +189,7 @@ export const HighlightsCard = ({
 	galleryCount,
 	audioDuration,
 }: HighlightsCardProps) => {
-	const showMediaIcon = isMediaCard(format);
+	const isMediaCard = isMedia(format);
 	const MediaPill = () => (
 		<div css={mediaIcon}>
 			{mainMedia?.type === 'Video' && (
@@ -205,7 +219,7 @@ export const HighlightsCard = ({
 	);
 	return (
 		<FormatBoundary format={format}>
-			<div css={[gridContainer, hoverStyles]}>
+			<div css={[gridContainer, hoverStyles, isMediaCard && mediaGrid]}>
 				<CardLink
 					linkTo={linkTo}
 					headlineText={headlineText}
@@ -241,7 +255,7 @@ export const HighlightsCard = ({
 					</div>
 				) : null}
 
-				{!!mainMedia && showMediaIcon && MediaPill()}
+				{!!mainMedia && isMediaCard && MediaPill()}
 
 				<div css={imageArea}>
 					{(avatarUrl && (