Merge pull request #14535 from guardian/Lightbox-Click-Area-fix-

Gallery main media: constrain lightbox overlay

Author: DanielCliftonGuardian

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -397,6 +397,8 @@ const galleryStyles = css`
 	${grid.between('grid-start', 'centre-column-end')}
 
 	grid-row: 7/9;
+	position: relative;
+	z-index: ${getZIndex('articleHeadline')};
 
 	${from.tablet} {
 		${grid.between('centre-column-start', 'grid-end')};

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs';
 import { from } from '@guardian/source/foundations';
 import { grid } from '../grid';
 import { type ArticleFormat } from '../lib/articleFormat';
+import { getZIndex } from '../lib/getZIndex';
 import { getImage } from '../lib/image';
 import { type ImageBlockElement } from '../types/content';
 import { type RenderingTarget } from '../types/renderingTarget';
@@ -19,8 +20,10 @@ type Props = {
 
 const styles = css`
 	${grid.column.all}
+	position: relative;
 	height: calc(80vh - 48px);
 	grid-row: 1/8;
+	z-index: ${getZIndex('mainMedia')};
 	${from.desktop} {
 		height: calc(100vh - 48px);
 	}

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -19,6 +19,7 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
+import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { TagType } from '../types/tag';
 import { Hide } from './Hide';
@@ -370,6 +371,8 @@ export const SeriesSectionLink = ({
 							format.design === ArticleDesign.Gallery &&
 								css`
 									display: inline-block;
+									position: relative;
+									z-index: ${getZIndex('articleHeadline')};
 								`,
 							format.display === ArticleDisplay.Immersive &&
 								css`