From 09336c689eddc7e2e7a82f991e85e37bd2cdd3c7 Mon Sep 17 00:00:00 2001
From: Matthieu Bergel <matthieu@ourworldindata.org>
Date: Mon, 4 Mar 2024 14:46:16 +0000
Subject: [PATCH] fix(r&w): smaller row-gap for small thumbnails in "more"
 section

---
 site/gdocs/components/ResearchAndWriting.scss | 16 ++++++++++------
 site/gdocs/components/ResearchAndWriting.tsx  |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/site/gdocs/components/ResearchAndWriting.scss b/site/gdocs/components/ResearchAndWriting.scss
index 48840695987..412d2787058 100644
--- a/site/gdocs/components/ResearchAndWriting.scss
+++ b/site/gdocs/components/ResearchAndWriting.scss
@@ -20,13 +20,8 @@ $rw-margin-bottom-grid-cell: 4px;
     color: $blue-50;
 }
 
-.research-and-writing-link__title {
-    margin-top: 0;
-    margin-bottom: $rw-margin-bottom-grid-cell;
-}
-
 .research-and-writing-row__links {
-    row-gap: 32px - $rw-margin-bottom-grid-cell;
+    row-gap: 40px - $rw-margin-bottom-grid-cell;
 
     @include sm-only {
         display: flex;
@@ -35,6 +30,10 @@ $rw-margin-bottom-grid-cell: 4px;
     }
 }
 
+.research-and-writing-row__links--condensed {
+    row-gap: 32px - $rw-margin-bottom-grid-cell;
+}
+
 .research-and-writing-link {
     @include sm-only {
         flex: 1 0 80%;
@@ -68,6 +67,11 @@ $rw-margin-bottom-grid-cell: 4px;
     }
 }
 
+.research-and-writing-link__title {
+    margin-top: 0;
+    margin-bottom: $rw-margin-bottom-grid-cell;
+}
+
 .research-and-writing-link__description {
     color: $blue-90;
     margin-bottom: $rw-margin-bottom-grid-cell;
diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
index 4c10049466e..a288b5a5831 100644
--- a/site/gdocs/components/ResearchAndWriting.tsx
+++ b/site/gdocs/components/ResearchAndWriting.tsx
@@ -149,7 +149,7 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
                     <h2 className="h2-bold research-and-writing-row__heading">
                         {more.heading}
                     </h2>
-                    <div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__links">
+                    <div className="grid grid-cols-4 grid-lg-cols-3 grid-md-cols-2 research-and-writing-row__links research-and-writing-row__links--condensed">
                         {more.articles.map((link, i) => (
                             <ResearchAndWritingLink
                                 shouldHideThumbnail