Update grids, spacing and alignment

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs';
 import {
 	between,
 	from,
+	space,
 	textSansBold12,
 	until,
 } from '@guardian/source/foundations';
@@ -48,11 +49,11 @@ const gridContainer = css`
 	/** Relative positioning is required to absolutely
 	position the card link overlay */
 	position: relative;
-	gap: 8px;
+	column-gap: ${space[2]}px;
 	grid-template-areas:
-		'headline 	headline'
-		'rating rating'
-		'media-icon image';
+		'headline headline'
+		'media-icon media-icon'
+		'. image';
 
 	/* Applied word-break: break-word to prevent text overflow
 	and ensure long words break onto the next line.
@@ -82,27 +83,15 @@ 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;
+	margin-bottom: ${space[1]}px;
 `;
 
 const mediaIcon = css`
 	grid-area: media-icon;
-	align-self: end;
+	display: flex;
+	align-items: flex-end;
 `;
 
 const audioPill = css`
@@ -133,16 +122,23 @@ const audioPillText = css`
 
 const imageArea = css`
 	grid-area: image;
-	height: 106px;
-	width: 106px;
+	height: 112px;
+	width: 112px;
 	align-self: end;
 	position: relative;
+	${until.desktop} {
+		margin-top: ${space[2]}px;
+	}
 	${from.desktop} {
-		height: 112px;
-		width: 112px;
+		align-self: start;
 	}
 `;
 
+/** Avatar alignment is an exception and should align with the bottom of the card *if* there is a gap.*/
+const avatarAlignmentStyles = css`
+	align-self: end;
+`;
+
 const hoverStyles = css`
 	:hover .image-overlay {
 		position: absolute;
@@ -164,12 +160,8 @@ const starWrapper = css`
 	background-color: ${palette('--star-rating-background')};
 	color: ${palette('--star-rating-fill')};
 	width: fit-content;
-	height: fit-content;
-	grid-area: rating;
-	${from.desktop} {
-		grid-area: media-icon;
-		align-self: flex-end;
-	}
+	grid-area: media-icon;
+	align-self: flex-end;
 `;
 
 export const HighlightsCard = ({
@@ -219,7 +211,7 @@ export const HighlightsCard = ({
 	);
 	return (
 		<FormatBoundary format={format}>
-			<div css={[gridContainer, hoverStyles, isMediaCard && mediaGrid]}>
+			<div css={[gridContainer, hoverStyles]}>
 				<CardLink
 					linkTo={linkTo}
 					headlineText={headlineText}
@@ -257,7 +249,7 @@ export const HighlightsCard = ({
 
 				{!!mainMedia && isMediaCard && MediaPill()}
 
-				<div css={imageArea}>
+				<div css={[imageArea, avatarUrl && avatarAlignmentStyles]}>
 					{(avatarUrl && (
 						<Avatar
 							src={avatarUrl}