Address PR comments

- Use grid paddedContainer instead of container which removes the need
to add after & before pseudo elements
- Add JSDoc comments to explain Picture imageMaxWidth
- Remove un-necessary todo comment

Author: marjisound

dotcom-rendering/src/components/GalleryCaption.tsx

@@ -94,7 +94,7 @@ export const GalleryCaption = ({
 					format={format}
 					pageId={pageId}
 					webTitle={webTitle}
-					context="ArticleMeta" // TODO: update context to GalleryImage
+					context="ArticleMeta"
 				/>
 			</Island>
 		</figcaption>

dotcom-rendering/src/components/GalleryImage.tsx

@@ -16,43 +16,17 @@ type Props = {
 };
 
 const styles = css`
-	${grid.container}
+	${grid.paddedContainer}
 	grid-auto-flow: row dense;
-	column-gap: ${space[5]}px;
 
 	${until.tablet} {
 		border-top: 1px solid ${palette('--article-border')};
 		padding-top: ${space[1]}px;
 	}
 
 	${from.tablet} {
-		&::before {
-			${grid.between('grid-start', 'centre-column-start')}
-			grid-row: span 2;
-			content: '';
-			background-color: ${palette('--article-background')};
-			border-right: 1px solid ${palette('--article-border')};
-		}
-
-		&::after {
-			${grid.between('centre-column-end', 'grid-end')}
-			grid-row: span 2;
-			content: '';
-			background-color: ${palette('--article-background')};
-			border-left: 1px solid ${palette('--article-border')};
-		}
-	}
-
-	${from.desktop} {
-		&::after {
-			${grid.between('right-column-end', 'grid-end')}
-		}
-	}
-
-	${from.leftCol} {
-		&::before {
-			${grid.between('grid-start', 'left-column-start')}
-		}
+		border-left: 1px solid ${palette('--article-border')};
+		border-right: 1px solid ${palette('--article-border')};
 	}
 `;
 

dotcom-rendering/src/components/Picture.tsx

@@ -488,6 +488,10 @@ const galleryBodyImageStyles = css`
 	}
 `;
 
+/**
+ * This ensures that the image height never goes above 96vh.
+ * The ratio parameter should be width:height.
+ */
 const imageMaxWidth = (
 	design: ArticleDesign,
 	ratio: number,