diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx
index 16a7d949cd..1f9aea4005 100644
--- a/dotcom-rendering/src/layouts/PictureLayout.tsx
+++ b/dotcom-rendering/src/layouts/PictureLayout.tsx
@@ -22,6 +22,7 @@ import { Carousel } from '../components/Carousel.importable';
import { ContributorAvatar } from '../components/ContributorAvatar';
import { DecideLines } from '../components/DecideLines';
import { DiscussionLayout } from '../components/DiscussionLayout';
+import { ExpandableMarketingCardWrapper } from '../components/ExpandableMarketingCardWrapper.importable';
import { Footer } from '../components/Footer';
import { GridItem } from '../components/GridItem';
import { HeaderAdSlot } from '../components/HeaderAdSlot';
@@ -67,7 +68,6 @@ const PictureGrid = ({ children }: { children: React.ReactNode }) => (
display: grid;
width: 100%;
margin-left: 0;
-
grid-column-gap: 10px;
/*
@@ -78,6 +78,7 @@ const PictureGrid = ({ children }: { children: React.ReactNode }) => (
Main content
Right Column
+ Duplicate lines are required to ensure the left column does not have extra vertical space.
*/
${from.wide} {
grid-template-columns: 219px 1px 1020px;
@@ -86,7 +87,10 @@ const PictureGrid = ({ children }: { children: React.ReactNode }) => (
'. border standfirst'
'lines border media'
'meta border media'
- 'meta border submeta';
+ 'uscard border media'
+ 'uscard border submeta'
+ 'uscard border .'
+ 'uscard border .';
}
${until.wide} {
@@ -96,7 +100,10 @@ const PictureGrid = ({ children }: { children: React.ReactNode }) => (
'. border standfirst standfirst standfirst'
'lines border media media media'
'meta border media media media'
- 'meta border submeta submeta submeta';
+ 'uscard border media media media'
+ 'uscard border submeta submeta submeta'
+ 'uscard border . . .'
+ 'uscard border . . .';
}
/*
@@ -566,6 +573,22 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
/>
+ {isWeb && (
+
+
+
+
+
+
+
+ )}
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
index 23e5d6ce26..9e26899fd0 100644
--- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
+++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -23,6 +23,7 @@ import { Border } from '../components/Border';
import { Carousel } from '../components/Carousel.importable';
import { DecideLines } from '../components/DecideLines';
import { DiscussionLayout } from '../components/DiscussionLayout';
+import { ExpandableMarketingCardWrapper } from '../components/ExpandableMarketingCardWrapper.importable';
import { Footer } from '../components/Footer';
import { GridItem } from '../components/GridItem';
import { HeaderAdSlot } from '../components/HeaderAdSlot';
@@ -90,9 +91,10 @@ const ShowcaseGrid = ({ children }: { children: React.ReactNode }) => (
'title border headline headline headline'
'lines border media media media'
'meta border media media media'
- 'meta border standfirst . right-column'
- '. border body . right-column'
- '. border . . right-column';
+ 'uscard border media media media'
+ 'uscard border standfirst . right-column'
+ 'uscard border body . right-column'
+ 'uscard border . . right-column';
}
${until.wide} {
@@ -101,9 +103,10 @@ const ShowcaseGrid = ({ children }: { children: React.ReactNode }) => (
'title border headline headline'
'lines border media media'
'meta border media media'
- 'meta border standfirst right-column'
- '. border body right-column'
- '. border . right-column';
+ 'uscard border media media'
+ 'uscard border standfirst right-column'
+ 'uscard border body right-column'
+ 'uscard border . right-column';
}
/*
@@ -536,6 +539,22 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
)}
+ {isWeb && (
+
+
+
+
+
+
+
+ )}
{
)}