import { FunctionComponent } from 'react'
import theme from '../../styles/theme'

const TileContainer: FunctionComponent = ({ children }) => {
  return (
    <div className='tile-container'>
      {children}
      <style jsx>{`
        .tile-container {
          display: grid;
          grid-template-columns: 1fr;
        }

        @media (min-width: ${theme.midsize}) {
          .tile-container {
            grid-template-columns: 1fr 1fr;
            grid-gap: 2em;
          }
        }

        @media (min-width: ${theme.fullsize}) {
          .tile-container {
            grid-template-columns: 1fr 1fr 1fr;
          }
        }
      `}</style>
    </div>
  )
}

export default TileContainer
