Adjust content padding when in flexible container

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

@@ -498,7 +498,7 @@ export const Card = ({
 	/** Determines the gap of between card components based on card properties */
 	const getGapSize = (): GapSize => {
 		if (isOnwardContent) return 'none';
-		if (hasBackgroundColour) return 'tiny';
+		if (hasBackgroundColour && !isFlexibleContainer) return 'tiny';
 		if (!!isFlexSplash || (isFlexibleContainer && imageSize === 'jumbo')) {
 			return 'small';
 		}
@@ -814,6 +814,7 @@ export const Card = ({
 						imagePositionOnDesktop={imagePositionOnDesktop}
 						hasBackgroundColour={hasBackgroundColour}
 						isOnwardContent={isOnwardContent}
+						isFlexibleContainer={isFlexibleContainer}
 					>
 						{/* This div is needed to keep the headline and trail text justified at the start */}
 						<div

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

@@ -61,13 +61,40 @@ const flexBasisStyles = ({
 	}
 };
 
+const paddingStyles = (
+	imagePosition: ImagePositionType,
+	isFlexibleContainer: boolean,
+) => {
+	/**
+	 * If we're in a flexible container there is a 20px gap between the image
+	 * and content. We don't apply padding to the content on the same edge as
+	 * the image so the content is aligned with the grid.
+	 */
+	if (isFlexibleContainer && imagePosition === 'left') {
+		return css`
+			padding: ${space[1]}px ${space[1]}px ${space[1]}px 0;
+		`;
+	}
+
+	if (isFlexibleContainer && imagePosition === 'right') {
+		return css`
+			padding: ${space[1]}px 0 ${space[1]}px ${space[1]}px;
+		`;
+	}
+
+	return css`
+		padding: ${space[1]}px;
+	`;
+};
+
 type Props = {
 	children: React.ReactNode;
 	imageType?: CardImageType;
 	imageSize: ImageSizeType;
 	imagePositionOnDesktop: ImagePositionType;
 	hasBackgroundColour?: boolean;
 	isOnwardContent?: boolean;
+	isFlexibleContainer?: boolean;
 };
 
 export const ContentWrapper = ({
@@ -77,6 +104,7 @@ export const ContentWrapper = ({
 	imagePositionOnDesktop,
 	hasBackgroundColour,
 	isOnwardContent,
+	isFlexibleContainer = false,
 }: Props) => {
 	const isHorizontalOnDesktop =
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
@@ -85,14 +113,10 @@ export const ContentWrapper = ({
 		<div
 			css={[
 				sizingStyles,
-				isHorizontalOnDesktop && [
+				isHorizontalOnDesktop &&
 					flexBasisStyles({ imageSize, imageType }),
-				],
-				css`
-					padding: ${!!hasBackgroundColour || !!isOnwardContent
-						? space[1]
-						: 0}px;
-				`,
+				(!!hasBackgroundColour || !!isOnwardContent) &&
+					paddingStyles(imagePositionOnDesktop, isFlexibleContainer),
 			]}
 		>
 			{children}