import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

export const Wrapper = styled.ul`
  display: grid;
  grid-gap: 0.9rem;
  grid-template-columns: repeat(6, 15.7%);
  ${isMobileDevice
    ? css`
     display: flex;
     flex-wrap: wrap;
     grid-template-columns: none;
     grid-gap: 0;
    `
    : ''};
`