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

import { isMobileDevice } from 'config'

export const HeaderWrapAd = styled.div<{column: number}>`
  width: 100%;
  margin-bottom: 0.7rem;
  display: grid;
  grid-column-gap: 0.9rem;
  grid-template-columns: ${({ column }) => (column > 1 ? `repeat(${column},${16.3 * 6 / column}%)` : 'repeat(1, 98.7%)')};
  
  ${isMobileDevice && css`
    padding: 0px 0.71rem;
    grid-template-columns: none;
  `}}
`