fix(footer): flex-end the email

src/components/footer.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Grid, IconWithContent, Icon, Link, Text } from ".";
+import { css } from "@emotion/react";
+import { Grid, IconWithContent, Icon, Link } from ".";
 import Envelope from "../icons/envelope.svg";
 import Phone from "../icons/phone.svg";
 
@@ -17,12 +18,24 @@ const Content = styled.div`
   text-align: center;
 `;
 
+const Cell = styled.div`
+  display: flex;
+  ${props =>
+    props.flexEnd &&
+    css`
+      @media (min-width: ${props.flexEnd}) {
+        justify-content: flex-end;
+      }
+    `}
+`;
+
 export default function Footer() {
   const year = new Date().getFullYear();
   return (
     <Container>
       <Content>
-        <Grid columns={[1, 2]}>
+        <Grid columns={[1, 2]} breakpoints={["45em"]}>
+          <Cell>
             <IconWithContent>
               <Icon color="dark" size="lg">
                 <Phone />
@@ -31,6 +44,8 @@ export default function Footer() {
                 07123 456789
               </Link>
             </IconWithContent>
+          </Cell>
+          <Cell flexEnd={"45em"}>
             <IconWithContent>
               <Icon color="dark" size="lg">
                 <Envelope />
@@ -43,6 +58,7 @@ export default function Footer() {
                 quotations@abcprojectdesign.com
               </Link>
             </IconWithContent>
+          </Cell>
         </Grid>
         <div>&copy; {year} Abc Project Ltd</div>
       </Content>

src/components/icon-with-content.js

@@ -9,6 +9,7 @@ const Container = styled.div`
 `;
 
 const IconWrapper = styled.div`
+  display: flex;
   margin-right: var(--spacing-x-sm);
 `;