fix: responsive styles for steps (#5651)

* feat: styled footer links

* grid

* center

* Update bottom links and full bleed image

* Mobile spacing and font size adjustments

Decrease spacing in mobile and swap the sizing of fonts between mobile and desktop sizes

* Add responsive behavior to steps

Changes font size and margins in mobile view
Co-authored-by: Vignesh Mohankumar <me@vig.xyz>
Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>

src/pages/About/Step.tsx

 import styled from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
 
 const StyledStep = styled.div<{ selected: boolean }>`
   cursor: pointer;
   display: flex;
   padding: 24px 0;
   color: ${({ theme, selected }) => (selected ? theme.textPrimary : theme.textSecondary)};
-  font-size: 28px;
+  font-size: 20px;
   font-weight: 500;
-  line-height: 36px;
+  line-height: 28px;
   transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease}  color`};
 
   &:not(:last-of-type) {
     border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   }
+
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    font-size: 28px;
+    line-height: 36px;
+  }
 `
 
 const StepIndex = styled.span`
-  margin-right: 36px;
+  margin-right: 24px;
+  margin-left: 8px;
+
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    margin-right: 36px;
+  }
 `
 
 const Step = ({