import styled, { StyledComponent } from '@emotion/styled';
import { Flex } from '@rebass/emotion';
import { breakpoints } from 'utils/theme';

export const Gridlayout: StyledComponent<any, any, any> = styled(Flex)`
  div { flex-grow: 1; }

  @media (min-width: ${breakpoints.medium}) {
    div:nth-last-of-type(3):nth-of-type(1),
    div:nth-last-of-type(2):nth-of-type(2),
    div:nth-last-of-type(1):nth-of-type(3) {
      flex-basis: 33.33%;
    }

    div:nth-last-of-type(1):nth-of-type(7),
    div:nth-last-of-type(2):nth-of-type(6) {
      flex-basis: 50%;
    }

    div:nth-of-type(6n+1),
    div:nth-of-type(6n+2) {
        flex-basis: 50%;
    }

    div:nth-of-type(6n+3),
    div:nth-of-type(6n+4),
    div:nth-of-type(6n+5) {
        flex-basis: 33.33%;
    }
  }
`;