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

import { isMobileDevice } from 'config/userAgent'

export const Wrapper = styled.ul`
  display: grid;
  grid-template-columns: repeat(6, 15.6%);
  grid-gap: 0.9rem;

  .secondRow {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  ${isMobileDevice
    ? css`
     display: flex;
     flex-wrap: wrap;
     grid-template-columns: none;
     grid-gap: 0;
    `
    : ''};
`