src/components/split-container.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import React from 'react'
import { css } from '@emotion/core'

import { breakpoints, margins } from './globals'

const splitSyle = css`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  @media (min-width: ${breakpoints[0].breakpoint}) {
    flex-wrap: nowrap;
  }
  > *:first-child {
    margin-right: ${margins.md}px;
  }
`

export const SplitContainer = ({ children }) => (
  <div css={splitSyle}>{children}</div>
)