Update h2 styles for hosted article

Author: deedeeh

dotcom-rendering/src/components/ArticleBody.tsx

@@ -4,6 +4,7 @@ import {
 	headlineBold24,
 	remSpace,
 	textEgyptian17,
+	textSansBold20,
 } from '@guardian/source/foundations';
 import {
 	ArticleDesign,
@@ -73,6 +74,16 @@ const globalOlStyles = () => css`
 	}
 `;
 
+const hostedContentH2Styles = (design: ArticleDesign) => css`
+	${design === ArticleDesign.HostedArticle &&
+	`
+		h2 {
+			${textSansBold20};
+			margin-bottom: ${remSpace[2]};
+		}
+	`}
+`;
+
 const globalH3Styles = (display: ArticleDisplay) => css`
 	${display === ArticleDisplay.NumberedList &&
 	`
@@ -145,6 +156,7 @@ export const ArticleBody = ({
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
 		format.design === ArticleDesign.Crossword;
+	const isHostedContent = format.design === ArticleDesign.HostedArticle;
 	const language = decideLanguage(lang);
 	const languageDirection = decideLanguageDirection(isRightToLeftLang);
 	const hasObserverPublicationTag = tags.find(
@@ -230,6 +242,7 @@ export const ArticleBody = ({
 				css={[
 					`margin-top: ${remSpace[3]}`,
 					isInteractiveContent ? null : bodyPadding,
+					isHostedContent && hostedContentH2Styles(format.design),
 					globalH3Styles(format.display),
 					globalOlStyles(),
 					globalStrongStyles,

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -176,22 +176,6 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 								</Island>
 							)}
 						</div>
-						<div
-							css={[
-								grid.column.right,
-								css`
-									grid-row: 1;
-								`,
-							]}
-						>
-							<Caption
-								captionText={mainMediaCaptionText}
-								format={format}
-								isMainMedia={true}
-							/>
-
-							{'Onward content'}
-						</div>
 						<div
 							css={[
 								grid.column.centre,
@@ -248,6 +232,27 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 								color={themePalette('--straight-lines')}
 							/>
 						</div>
+						<div
+							css={[
+								grid.column.centre,
+								css`
+									grid-row: auto;
+
+									${from.leftCol} {
+										${grid.column.right}
+										grid-row: 1;
+									}
+								`,
+							]}
+						>
+							<Caption
+								captionText={mainMediaCaptionText}
+								format={format}
+								isMainMedia={true}
+							/>
+
+							{'Onward content'}
+						</div>
 					</div>
 
 					<div css={[grid.container, border]}>