Use correct image size for highlights card

Author: domlander

dotcom-rendering/src/components/Card/components/ImageWrapper.tsx

@@ -25,6 +25,7 @@ export type ImageSizeType =
 	| 'jumbo'
 	| 'carousel'
 	| 'podcast'
+	| 'highlights-card'
 	| 'feature'
 	| 'feature-large'
 	| 'feature-immersive';

dotcom-rendering/src/components/CardPicture.tsx

@@ -44,6 +44,11 @@ const decideImageWidths = (
 		case 'podcast':
 			return [{ breakpoint: breakpoints.mobile, width: 80, aspectRatio }];
 
+		case 'highlights-card':
+			return [
+				{ breakpoint: breakpoints.mobile, width: 112, aspectRatio },
+			];
+
 		case 'carousel':
 			return [
 				{ breakpoint: breakpoints.mobile, width: 220, aspectRatio },

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

@@ -165,7 +165,7 @@ const decideImage = (
 					isCircular={false}
 					aspectRatio="1:1"
 				/>
-				<div className="image-overlay"> </div>
+				<div className="image-overlay" />
 			</>
 		);
 	}
@@ -177,15 +177,15 @@ const decideImage = (
 	return (
 		<>
 			<CardPicture
-				imageSize="medium"
+				imageSize="highlights-card"
 				mainImage={image.src}
 				alt={image.altText}
 				loading={imageLoading}
 				isCircular={true}
 				aspectRatio="1:1"
 			/>
 			{/* This image overlay is styled when the CardLink is hovered */}
-			<div className="image-overlay circular"> </div>
+			<div className="image-overlay circular" />
 		</>
 	);
 };