From 6e6e442a7c11ecdf34cd2e8241f67c720bbd5c94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Wed, 17 Apr 2024 14:55:23 +0200
Subject: [PATCH] Update prominent links design

Resolves #3368.
---
 site/gdocs/components/centered-article.scss | 22 ++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index cc065014de3..80c6727c256 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -913,29 +913,37 @@ div.raw-html-table__container {
 }
 
 .article-block__prominent-link {
-    margin-bottom: 24px;
+    margin-bottom: 8px;
     color: $blue-90;
+    background-color: $blue-5;
+    padding: 16px;
 
     > .prominent-link__image {
         height: 100%;
         width: 100%;
     }
 
-    p,
-    h3 {
-        margin: 2px 0;
+    p {
+        margin: 0;
+        @include sm-only {
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+        }
     }
 
     h3 {
         display: inline-block;
+        margin: 0 0 4px 0;
         &:hover {
             text-decoration: underline;
         }
     }
 
-    + .article-block__prominent-link {
-        padding-top: 24px;
-        border-top: 1px solid $blue-10;
+    // Last consecutive sibling.
+    &:has(+ :not(.article-block__prominent-link)) {
+        margin-bottom: 32px;
     }
 }