fix: update /about cards and step sizings (#5610)

* fix: make cards smaller and update font-sizes

* breakpoints

src/pages/About/Card.tsx

 import { Link } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
 
 const StyledCard = styled.div<{ isDarkMode: boolean }>`
   display: flex;
@@ -11,7 +12,7 @@ const StyledCard = styled.div<{ isDarkMode: boolean }>`
   text-decoration: none;
   color: ${({ theme }) => theme.textPrimary};
   padding: 40px;
-  height: 400px;
+  height: 200px;
   border-radius: 24px;
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease}  background-color`};
   border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? 'transparent' : theme.backgroundOutline)};
@@ -22,15 +23,34 @@ const StyledCard = styled.div<{ isDarkMode: boolean }>`
 `
 
 const CardTitle = styled.div`
-  font-weight: 600;
-  font-size: 48px;
-  line-height: 56px;
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 500;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    font-size: 20px;
+    line-height: 28px;
+  }
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    font-size: 28px;
+    line-height: 36px;
+  }
 `
 
 const CardDescription = styled.div`
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 36px;
+  font-size: 20px;
+  line-height: 28px;
+
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    font-size: 20px;
+    line-height: 28px;
+  }
 `
 
 const Card = ({

src/pages/About/Step.tsx

@@ -5,8 +5,8 @@ const StyledStep = styled.div<{ selected: boolean }>`
   display: flex;
   padding: 24px 0;
   color: ${({ theme, selected }) => (selected ? theme.textPrimary : theme.textSecondary)};
-  font-size: 36px;
-  line-height: 44px;
+  font-size: 20px;
+  line-height: 28px;
 
   &:not(:last-of-type) {
     border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};