Apply SectionHeaders styles to the IndicatorHighlightsList ListHeader

kausaltech · Dec 12, 2024 · b29ac04 · b29ac04
1 parent 3997f52
commit b29ac04
Showing 1 changed file with 9 additions and 1 deletion.
diff --git 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};
   }
 `;