For avatars in the highlights container, use a 1:1 aspect ratio instead of forcing the height and width in the parent container. This prevents the image becoming distorted as avatars as actually a 6:5 ratio.

Author: abeddow91

dotcom-rendering/src/components/Avatar.tsx

@@ -88,7 +88,13 @@ const decideImageWidths = (
 			];
 		/* Avatars on cards in the highlights container are fixed to 98px on all breakpoints */
 		case 'highlights-card':
-			return [{ breakpoint: breakpoints.mobile, width: 98 }];
+			return [
+				{
+					breakpoint: breakpoints.mobile,
+					width: 98,
+					aspectRatio: '1:1',
+				},
+			];
 	}
 };
 

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

@@ -10,9 +10,7 @@ const imageStyles = css`
 	position: relative;
 	align-self: flex-end;
 	flex-shrink: 0;
-	height: 98px;
 	width: 98px;
-
 	${until.tablet} {
 		margin-top: ${space[2]}px;
 	}