Add quadrule and border bottom in galleries submeta

Author: ioannakok

dotcom-rendering/src/components/SubMeta.tsx

@@ -88,6 +88,7 @@ const listWrapper = (design: ArticleDesign): SerializedStyles => {
 			${grid.column.centre}
 			padding-bottom: 0.75rem;
 			margin-bottom: 6px;
+			border-bottom: 1px solid ${palette('--article-border')};
 		`;
 	}
 

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -6,6 +6,7 @@ import {
 	space,
 } 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';
@@ -281,6 +282,15 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					);
 				})}
 
+				<StraightLines
+					data-print-layout="hide"
+					count={4}
+					cssOverrides={css`
+						display: block;
+					`}
+					color={palette('--straight-lines')}
+				/>
+
 				<SubMeta
 					format={format}
 					subMetaKeywordLinks={frontendData.subMetaKeywordLinks}