fix: responsive styling for info button (#5659)

Responsive styling for info button

Decreases gap and font size and adds margin to external link arrow icon

src/pages/About/index.tsx

@@ -88,20 +88,29 @@ const CardGrid = styled.div`
 `
 
 const InfoButton = styled(ButtonOutlined)`
+  font-size: 16px;
+  line-height: 20px;
+  padding: 12px;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
     font-size: 20px;
     line-height: 24px;
-  padding: 12px;
+  }
 `
 
 const ActionsContainer = styled.span`
   display: flex;
-  gap: 24px;
+  gap: 16px;
   width: 100%;
 
   & > * {
     flex: 1;
   }
 
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    gap: 24px;
+  }
+
   @media screen and (min-width: ${BREAKPOINTS.md}px) {
     flex-direction: column;
   }
@@ -195,6 +204,7 @@ const Copyright = styled.span`
 
 const WrappedExternalArrow = styled.span`
   color: ${({ theme }) => theme.textTertiary};
+  margin-left: 4px;
 `
 
 export default function About() {