Footer A4

<footer
  sx={{
    fontSize: 1,
    variant: 'styles.footer',
  }}>
  <div
    sx={{
      display: 'grid',
      gridTemplateRows: 'repeat(4, 32px)',
      gridTemplateColumns: ['repeat(2, 1fr)', 'repeat(4, 1fr)'],
      gridAutoFlow: 'column',
      px: 2,
      py: 4,
    }}>
    <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
      Home
    </Link>
    <Link to="/work" sx={{ variant: 'styles.navlink', p: 2 }}>
      Work
    </Link>
    <Link to="/blog" sx={{ variant: 'styles.navlink', p: 2 }}>
      Blog
    </Link>
    <Link to="/about" sx={{ variant: 'styles.navlink', p: 2 }}>
      About
    </Link>
    <Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
      Products
    </Link>
    <Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
      Community
    </Link>
    <Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
      Support
    </Link>
    <Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
      Contact
    </Link>
    <Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
      Support
    </Link>
    <Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
      Products
    </Link>
    <Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
      Contact
    </Link>
    <Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
      Community
    </Link>
    <Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
      Products
    </Link>
    <Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
      Community
    </Link>
    <Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
      Support
    </Link>
    <Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
      Contact
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'flex-end',
      p: 3,
    }}>
    <Link to="/privacy-policy" sx={{ color: 'inherit' }}>
      Privacy Policy
    </Link>
    <div sx={{ mx: 1 }} />
    <Link to="/terms-of-use" sx={{ color: 'inherit' }}>
      Terms of Use
    </Link>
    <div sx={{ mx: 1 }} />© 2019 Jane Doe
  </div>
</footer>
<footer
  sx={{
    fontSize: 1,
    variant: 'styles.footer',
  }}>
  <div
    sx={{
      display: 'grid',
      gridTemplateRows: 'repeat(4, 32px)',
      gridTemplateColumns: ['repeat(2, 1fr)', 'repeat(4, 1fr)'],
      gridAutoFlow: 'column',
      px: 2,
      py: 4,
    }}>
    <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
      Home
    </Link>
    <Link to="/work" sx={{ variant: 'styles.navlink', p: 2 }}>
      Work
    </Link>
    <Link to="/blog" sx={{ variant: 'styles.navlink', p: 2 }}>
      Blog
    </Link>
    <Link to="/about" sx={{ variant: 'styles.navlink', p: 2 }}>
      About
    </Link>
    <Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
      Products
    </Link>
    <Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
      Community
    </Link>
    <Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
      Support
    </Link>
    <Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
      Contact
    </Link>
    <Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
      Support
    </Link>
    <Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
      Products
    </Link>
    <Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
      Contact
    </Link>
    <Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
      Community
    </Link>
    <Link to="/products" sx={{ variant: 'styles.navlink', p: 2 }}>
      Products
    </Link>
    <Link to="/community" sx={{ variant: 'styles.navlink', p: 2 }}>
      Community
    </Link>
    <Link to="/support" sx={{ variant: 'styles.navlink', p: 2 }}>
      Support
    </Link>
    <Link to="/contact" sx={{ variant: 'styles.navlink', p: 2 }}>
      Contact
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'flex-end',
      p: 3,
    }}>
    <Link to="/privacy-policy" sx={{ color: 'inherit' }}>
      Privacy Policy
    </Link>
    <div sx={{ mx: 1 }} />
    <Link to="/terms-of-use" sx={{ color: 'inherit' }}>
      Terms of Use
    </Link>
    <div sx={{ mx: 1 }} />© 2019 Jane Doe
  </div>
</footer>