tweak story and mobile image height

Author: Georges-GNM

dotcom-rendering/src/components/Masthead/Titlepiece/CustomSubNav.stories.tsx

@@ -62,16 +62,22 @@ const meta = {
 	component: CustomSubNav,
 	title: 'Components/Masthead/Titlepiece/CustomSubNav',
 	decorators: [
-		(Story) => (
-			<div
-				css={css`
-					background-color: ${sourcePalette.brand[400]};
-					padding: ${space[3]}px;
-				`}
-			>
-				<Story />
-			</div>
-		),
+		(Story, context) => {
+			const hasImage =
+				(context.args.customSubNav.images?.length ?? 0) > 0;
+			return (
+				<div
+					css={css`
+						background-color: ${hasImage
+							? sourcePalette.neutral[100]
+							: sourcePalette.brand[400]};
+						padding: ${hasImage ? 0 : space[2]}px;
+					`}
+				>
+					<Story />
+				</div>
+			);
+		},
 	],
 	render: (args) => <CustomSubNav {...args} />,
 	args: {

dotcom-rendering/src/components/Masthead/Titlepiece/CustomSubNav.tsx

@@ -118,8 +118,12 @@ const imageWrapperStyles = css`
 const headerImageStyles = css`
 	display: block;
 	width: 100%;
-	height: 140px;
+	height: 210px;
 	object-fit: cover;
+
+	${from.tablet} {
+		height: 140px;
+	}
 `;
 
 const imageHeaderTextStyles = css`