New caption / standfirst / meta Gallery design

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
@@ -17,6 +18,7 @@ import type { FEElement } from '../types/content';
 import type { Podcast, TagType } from '../types/tag';
 import { Avatar } from './Avatar';
 import { Branding } from './Branding.importable';
+import { Caption } from './Caption';
 import { CommentCount } from './CommentCount.importable';
 import { useConfig } from './ConfigContext';
 import { Contributor } from './Contributor';
@@ -41,6 +43,7 @@ type Props = {
 	isCommentable: boolean;
 	mainMediaElements?: FEElement[];
 	crossword?: FEArticle['crossword'];
+	captionText?: string;
 };
 
 const meta = (format: ArticleFormat) => {
@@ -324,6 +327,7 @@ export const ArticleMeta = ({
 	isCommentable,
 	mainMediaElements,
 	crossword,
+	captionText,
 }: Props) => {
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
@@ -404,6 +408,21 @@ export const ArticleMeta = ({
 								/>
 							)}
 
+							{format.design === ArticleDesign.Gallery ? (
+								<Hide from="leftCol">
+									<Caption
+										captionText={captionText}
+										format={format}
+										isMainMedia={true}
+									/>
+									<StraightLines
+										cssOverrides={stretchLines}
+										count={4}
+										color={themePalette('--straight-lines')}
+									/>
+								</Hide>
+							) : null}
+
 							{crossword?.creator && (
 								<CrosswordSetter
 									setter={crossword.creator.name}

dotcom-rendering/src/components/Standfirst.tsx

@@ -90,6 +90,10 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => {
 			}
 			return css`
 				${headlineMedium20}
+
+				${from.leftCol} {
+					${headlineMedium24}
+				}
 			`;
 		case ArticleDesign.Obituary:
 		case ArticleDesign.Comment:

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -4,8 +4,10 @@ import {
 	from,
 	palette as sourcePalette,
 	space,
+	until,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { Fragment } from 'react';
 import { AdPlaceholder } from '../components/AdPlaceholder.apps';
 import { AdPortals } from '../components/AdPortals.importable';
@@ -67,15 +69,40 @@ const headerStyles = css`
 	}
 `;
 
-const metaAndDisclaimerContainer = css`
+const captionContainer = css`
+	${grid.column.left}
+
+	${until.leftCol} {
+		${grid.column.centre};
+	}
+	grid-row: 8;
+`;
+
+const standfirstStyles = css`
 	${grid.column.centre}
+
+	${from.leftCol} {
+		width: 75%;
+		grid-row: 10;
+	}
+`;
+
+const metaAndDisclaimerContainer = css`
+	${grid.column.centre};
+
+	${from.leftCol} {
+		${grid.column.left}
+		grid-row: 10;
+		padding-top: 10px;
+	}
+
 	padding-bottom: ${space[6]}px;
 	${from.tablet} {
 		position: relative;
 		&::before {
 			content: '';
 			position: absolute;
-			left: -10px;
+			left: -20px;
 			top: 0;
 			bottom: 0;
 			width: 1px;
@@ -266,16 +293,33 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 							frontendData.webPublicationDateDeprecated
 						}
 					/>
-					<Standfirst
-						format={format}
-						standfirst={frontendData.standfirst}
-					/>
-					<Caption
-						captionText={captionText}
-						format={format}
-						isMainMedia={true}
-					/>
+					<div css={standfirstStyles}>
+						<Standfirst
+							format={format}
+							standfirst={frontendData.standfirst}
+						/>
+					</div>
+
+					<div css={captionContainer}>
+						<Hide until="leftCol">
+							<Caption
+								captionText={captionText}
+								format={format}
+								isMainMedia={true}
+							/>
+						</Hide>
+					</div>
+
 					<div css={metaAndDisclaimerContainer}>
+						<div>
+							<Hide until="leftCol">
+								<StraightLines
+									count={4}
+									color={palette('--straight-lines')}
+								/>
+							</Hide>
+						</div>
+
 						{isWeb ? (
 							<ArticleMeta
 								branding={
@@ -297,6 +341,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								isCommentable={frontendData.isCommentable}
 								discussionApiUrl={discussionApiUrl}
 								shortUrlId={shortUrlId}
+								captionText={captionText}
 							/>
 						) : null}
 						{isApps ? (

dotcom-rendering/src/paletteDeclarations.ts

@@ -3443,7 +3443,7 @@ const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20];
 
 const straightLinesLight: PaletteFunction = (format) => {
 	if (format.design === ArticleDesign.Gallery) {
-		return sourcePalette.neutral[20];
+		return sourcePalette.neutral[38];
 	}
 	if (format.theme === ArticleSpecial.SpecialReportAlt) {
 		return transparentColour(sourcePalette.neutral[60], 0.3);