diff --git a/site/css/grid.scss b/site/css/grid.scss
index 98c90e484c6..7ef6d82772e 100644
--- a/site/css/grid.scss
+++ b/site/css/grid.scss
@@ -157,3 +157,14 @@ $grid-responsive: (lg, md, sm);
}
}
}
+
+// Custom helpers
+.grid-row-start-2 {
+ grid-row-start: 2;
+}
+
+.grid-md-row-start-auto {
+ @include breakpoint-max(md) {
+ grid-row-start: auto;
+ }
+}
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index 4318807642b..564e04d5c23 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -8,7 +8,7 @@ import PullQuote from "./PullQuote.js"
import Recirc from "./Recirc.js"
import List from "./List.js"
import NumberedList from "./NumberedList.js"
-import Image from "./Image.js"
+import Image, { ImageParentContainer } from "./Image.js"
import {
get,
OwidEnrichedGdocBlock,
@@ -46,6 +46,7 @@ import { Socials } from "./Socials.js"
export type Container =
| "default"
| "sticky-right-left-column"
+ | "sticky-right-left-heading-column"
| "sticky-right-right-column"
| "sticky-left-left-column"
| "sticky-left-right-column"
@@ -124,6 +125,9 @@ const layouts: { [key in Container]: Layouts} = {
["default"]: "span-cols-5 col-start-1 span-md-cols-12",
["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12",
},
+ ["sticky-right-left-heading-column"]: {
+ ["default"]: "span-cols-5 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1"
+ },
["sticky-right-right-column"]: {
["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
@@ -255,7 +259,7 @@ export default function ArticleBlock({
smallFilename={block.smallFilename}
alt={block.alt}
hasOutline={block.hasOutline}
- containerType={containerType}
+ containerType={containerType as ImageParentContainer}
/>
{block.caption ? (