Reduce CTA's font size on small screens (#1250)

* Reduce CTA's font size on small screens

* PR FIX

* Update src/shared/components/CallToActionButton/CallToActionButton.style.ts

Co-authored-by: Klaudiusz Dembler <accounts@kdembler.com>

src/shared/components/CallToActionButton/CallToActionButton.style.ts

@@ -1,7 +1,7 @@
 import isPropValid from '@emotion/is-prop-valid'
 import styled from '@emotion/styled'
 
-import { colors, media, sizes, transitions } from '@/shared/theme'
+import { colors, media, sizes, transitions, typography } from '@/shared/theme'
 
 import { ColorVariants } from './CallToActionButton'
 
@@ -41,6 +41,11 @@ export const BodyWrapper = styled(Text)`
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  ${media.compact} {
+    font-size: ${typography.sizes.h5};
+    line-height: ${typography.lineHeights.h5};
+  }
 `
 
 export const ContentWrapper = styled.div`

src/shared/components/CallToActionButton/CallToActionButton.tsx

@@ -29,7 +29,7 @@ export const CallToActionButton: FC<CallToActionButtonProps> = ({
     <StyledContainer {...linkProps} onClick={onClick} colorVariant={colorVariant}>
       <ContentWrapper>
         <IconWrapper colorVariant={colorVariant === 'blue' ? 'lightBlue' : colorVariant}>{icon}</IconWrapper>
-        <BodyWrapper variant="h5">
+        <BodyWrapper variant="h6">
           {label}
           <SvgGlyphChevronRight />
         </BodyWrapper>