diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index dd0e2cdfcd1..6c37520f087 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -732,6 +732,7 @@ export const Card = ({
 			showTopBarMobile={showTopBarMobile}
 			containerPalette={containerPalette}
 			isOnwardContent={isOnwardContent}
+			cardBackgroundColour={backgroundColour}
 		>
 			<CardLink
 				linkTo={linkTo}
@@ -782,7 +783,6 @@ export const Card = ({
 			)}
 
 			<CardLayout
-				cardBackgroundColour={backgroundColour}
 				imagePositionOnDesktop={imagePositionOnDesktop}
 				imagePositionOnMobile={imagePositionOnMobile}
 				minWidthInPixels={minWidthInPixels}
@@ -973,7 +973,8 @@ export const Card = ({
 									aspectRatio={aspectRatio}
 								/>
 								{(isVideoMainMedia ||
-									(isVideoArticle && !isBetaContainer)) &&
+									(isVideoArticle &&
+										containerType === 'fixed/video')) &&
 									mainMedia.duration > 0 && (
 										<div
 											css={css`
diff --git a/dotcom-rendering/src/components/Card/components/CardLayout.tsx b/dotcom-rendering/src/components/Card/components/CardLayout.tsx
index 91b870e50b4..e80315d3ae8 100644
--- a/dotcom-rendering/src/components/Card/components/CardLayout.tsx
+++ b/dotcom-rendering/src/components/Card/components/CardLayout.tsx
@@ -13,7 +13,6 @@ export type GapSizes = { row: GapSize; column: GapSize };
 
 type Props = {
 	children: React.ReactNode;
-	cardBackgroundColour: string;
 	imageType: CardImageType | undefined;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
@@ -25,7 +24,18 @@ type Props = {
 
 const containerStyles = css`
 	display: flex;
-	flex-basis: 100%;
+`;
+
+const desktopFlexBasis = css`
+	${from.tablet} {
+		flex-basis: 100%;
+	}
+`;
+
+const mobileFlexBasis = css`
+	${until.tablet} {
+		flex-basis: 100%;
+	}
 `;
 
 // Until mobile landscape, show 1 card on small screens
@@ -156,9 +166,12 @@ const decideGap = (gapSize: GapSize) => {
 	}
 };
 
+const isVerticalLayout = (imagePosition: ImagePositionType) => {
+	return imagePosition === 'top' || imagePosition === 'bottom';
+};
+
 export const CardLayout = ({
 	children,
-	cardBackgroundColour,
 	imagePositionOnDesktop,
 	imagePositionOnMobile,
 	minWidthInPixels,
@@ -180,9 +193,10 @@ export const CardLayout = ({
 					isBetaContainer,
 					imageType === 'avatar',
 				),
+				isVerticalLayout(imagePositionOnMobile) && mobileFlexBasis,
+				isVerticalLayout(imagePositionOnDesktop) && desktopFlexBasis,
 			]}
 			style={{
-				backgroundColor: cardBackgroundColour,
 				rowGap: decideGap(gapSizes.row),
 				columnGap: decideGap(gapSizes.column),
 			}}
diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
index be734680d30..0df5b3145ce 100644
--- a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
+++ b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
@@ -9,6 +9,7 @@ import { FormatBoundary } from '../../FormatBoundary';
 type Props = {
 	children: React.ReactNode;
 	format: ArticleFormat;
+	cardBackgroundColour: string;
 	containerPalette?: DCRContainerPalette;
 	showTopBarDesktop?: boolean;
 	showTopBarMobile?: boolean;
@@ -98,6 +99,7 @@ export const CardWrapper = ({
 	showTopBarDesktop = true,
 	showTopBarMobile = false,
 	isOnwardContent = false,
+	cardBackgroundColour,
 }: Props) => {
 	return (
 		<FormatBoundary format={format}>
@@ -111,6 +113,7 @@ export const CardWrapper = ({
 						showTopBarMobile && mobileTopBarStyles,
 						isOnwardContent && onwardContentStyles,
 					]}
+					style={{ backgroundColor: cardBackgroundColour }}
 				>
 					{children}
 				</div>