import { Box, Flex } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import styled from 'styled-components';
import Routes from '../Routes';
import Header from './Header';

const Main = styled(Box)`
  ${mq.laptop`
    margin: 3px 8px;
  `}
  ${mq.desktop`
    margin: 3px 7%;
  `}  
  ${mq.extra`
    margin: 3px 15%;
`}
`;

const Layout = () => (
  <Flex flexDirection="column">
    <Header />
    <Main>
      <Routes />
    </Main>
  </Flex>
);

export default Layout;
