Podcast image when medium and on left should be bigger

Author: domlander

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

@@ -227,7 +227,10 @@ const HorizontalDivider = () => (
 	/>
 );
 
-const podcastImageStyles = (imageSize: MediaSizeType) => {
+const podcastImageStyles = (
+	imageSize: MediaSizeType,
+	imagePositionOnDesktop: MediaPositionType,
+) => {
 	switch (imageSize) {
 		case 'small':
 			return css`
@@ -240,6 +243,8 @@ const podcastImageStyles = (imageSize: MediaSizeType) => {
 			`;
 
 		case 'medium':
+			if (imagePositionOnDesktop === 'left') return;
+
 			return css`
 				width: 98px;
 				height: 98px;
@@ -248,6 +253,7 @@ const podcastImageStyles = (imageSize: MediaSizeType) => {
 					height: 120px;
 				}
 			`;
+
 		default:
 			return css`
 				width: 120px;
@@ -1119,7 +1125,12 @@ export const Card = ({
 						{media.type === 'podcast' && (
 							<>
 								{media.podcastImage?.src && !showKickerImage ? (
-									<div css={podcastImageStyles(mediaSize)}>
+									<div
+										css={podcastImageStyles(
+											mediaSize,
+											mediaPositionOnDesktop,
+										)}
+									>
 										<CardPicture
 											mainImage={media.podcastImage.src}
 											imageSize="small"

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

@@ -213,6 +213,16 @@ export const MediaWrapper = ({
 						mediaSize,
 						isBetaContainer,
 					}),
+				mediaType === 'podcast' &&
+					mediaSize === 'medium' &&
+					css`
+						${from.tablet} {
+							flex-basis: 120px;
+						}
+						${from.desktop} {
+							flex-basis: 168px;
+						}
+					`,
 				mediaType === 'avatar' &&
 					css`
 						display: flex;