Remove the un necessary styling in gallery image

Co-authored-by: Jamie B <[email protected]>

Author: marjisound

dotcom-rendering/src/components/GalleryImage.tsx

@@ -36,8 +36,8 @@ const styles = css`
 `;
 
 const galleryBodyImageStyles = css`
-	display: flex;
 	${grid.column.all}
+	position: relative;
 
 	${from.tablet} {
 		${grid.column.centre}
@@ -74,33 +74,26 @@ export const GalleryImage = ({
 
 	return (
 		<figure css={styles}>
-			<span css={galleryBodyImageStyles}>
-				<span
-					css={css`
-						position: relative;
-					`}
-				>
-					<Picture
-						alt={image.data.alt ?? ''}
-						format={format}
+			<div css={galleryBodyImageStyles}>
+				<Picture
+					alt={image.data.alt ?? ''}
+					format={format}
+					role={image.role}
+					master={asset.url}
+					width={width}
+					height={height}
+					loading="lazy"
+				/>
+				{renderingTarget === 'Web' && !isUndefined(image.position) && (
+					<LightboxLink
 						role={image.role}
-						master={asset.url}
-						width={width}
-						height={height}
-						loading="lazy"
+						format={format}
+						elementId={image.elementId}
+						isMainMedia={false}
+						position={image.position}
 					/>
-					{renderingTarget === 'Web' &&
-						!isUndefined(image.position) && (
-							<LightboxLink
-								role={image.role}
-								format={format}
-								elementId={image.elementId}
-								isMainMedia={false}
-								position={image.position}
-							/>
-						)}
-				</span>
-			</span>
+				)}
+			</div>
 
 			<GalleryCaption
 				captionHtml={image.data.caption}