From b29ac045a407959c2bd43286ecfa94305248683e Mon Sep 17 00:00:00 2001
From: Lilia Sviridova <svirivoda@gmail.com>
Date: Thu, 12 Dec 2024 19:14:26 +0200
Subject: [PATCH] Apply SectionHeaders styles to the IndicatorHighlightsList
 ListHeader

---
 components/indicators/IndicatorHighlightsList.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/indicators/IndicatorHighlightsList.tsx b/components/indicators/IndicatorHighlightsList.tsx
index 5a490cf6..c7367c41 100644
--- a/components/indicators/IndicatorHighlightsList.tsx
+++ b/components/indicators/IndicatorHighlightsList.tsx
@@ -41,8 +41,16 @@ export const GET_INDICATOR_HIGHLIGHTS = gql`
 
 const ListHeader = styled(Col)`
   h2 {
+    text-align: center;
+    padding: ${(props) => props.theme.spaces.s100};
+    border-radius: ${(props) => props.theme.cardBorderRadius};
+    background-color: ${(props) => props.theme.themeColors.white};
+    color: ${(props) => props.theme.headingsColor};
+    margin-bottom: ${(props) => props.theme.spaces.s300};
+    font-size: ${(props) => props.theme.fontSizeLg};
+
+  @media (min-width: ${(props) => props.theme.breakpointMd}) {
     font-size: ${(props) => props.theme.fontSizeXl};
-    margin-bottom: ${(props) => props.theme.spaces.s400};
   }
 `;