Use correct image size for scrollable medium images

Author: domlander

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

@@ -239,7 +239,7 @@ const podcastImageStyles = (imageSize: MediaSizeType) => {
 				}
 			`;
 
-		case 'medium':
+		case 'scrollable-medium':
 			return css`
 				width: 98px;
 				height: 98px;

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

@@ -25,6 +25,7 @@ export type MediaSizeType =
 	| 'xlarge'
 	| 'jumbo'
 	| 'carousel'
+	| 'scrollable-medium'
 	| 'podcast'
 	| 'highlights-card'
 	| 'feature'

dotcom-rendering/src/components/CardPicture.tsx

@@ -50,6 +50,18 @@ const decideImageWidths = (
 				{ breakpoint: breakpoints.mobile, width: 220, aspectRatio },
 			];
 
+		case 'scrollable-medium':
+			return [
+				{ breakpoint: breakpoints.mobile, width: 200, aspectRatio },
+				{
+					breakpoint: breakpoints.mobileLandscape,
+					width: 324,
+					aspectRatio,
+				},
+				{ breakpoint: breakpoints.tablet, width: 160, aspectRatio },
+				{ breakpoint: breakpoints.desktop, width: 220, aspectRatio },
+			];
+
 		case 'small':
 			return [
 				{

dotcom-rendering/src/components/ScrollableMedium.importable.tsx

@@ -63,7 +63,7 @@ export const ScrollableMedium = ({
 							}}
 							mediaPositionOnDesktop={imagePosition}
 							mediaPositionOnMobile={imagePosition}
-							mediaSize="medium"
+							mediaSize="scrollable-medium"
 							trailText={undefined} // unsupported
 							supportingContent={undefined} // unsupported
 							aspectRatio={aspectRatio}