Use column-gap instead of padding for flex splash

Author: domlander

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

@@ -638,13 +638,6 @@ export const Card = ({
 			};
 		}
 
-		if (isFlexSplash) {
-			return {
-				row: 'small',
-				column: 'none',
-			};
-		}
-
 		if (!isBetaContainer) {
 			/**
 			 * Media cards have 4px padding around the content so we have a
@@ -1092,11 +1085,6 @@ export const Card = ({
 							isBetaContainer,
 							isOnwardContent,
 						)}
-						padRight={
-							!!isFlexSplash &&
-							image &&
-							imagePositionOnDesktop === 'right'
-						}
 					>
 						{/* This div is needed to keep the headline and trail text justified at the start */}
 						<div

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

@@ -99,12 +99,6 @@ const paddingBetaContainerStyles = (
 	}
 `;
 
-const padRightStyles = css`
-	${from.tablet} {
-		padding-right: ${space[5]}px;
-	}
-`;
-
 const getImageDirection = (
 	imagePosition: ImagePositionType,
 ): ImageDirection => {
@@ -127,7 +121,6 @@ type Props = {
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	padContent?: 'small' | 'large';
-	padRight?: boolean;
 };
 
 export const ContentWrapper = ({
@@ -138,7 +131,6 @@ export const ContentWrapper = ({
 	imagePositionOnDesktop,
 	imagePositionOnMobile,
 	padContent,
-	padRight = false,
 }: Props) => {
 	const imageDirectionDesktop = getImageDirection(imagePositionOnDesktop);
 	const paddingSpace = padContent === 'small' ? 1 : 2;
@@ -161,7 +153,6 @@ export const ContentWrapper = ({
 						imagePositionOnDesktop,
 						paddingSpace,
 					),
-				padRight && padRightStyles,
 			]}
 		>
 			{children}