import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';
import Img from 'gatsby-image';
import { Box, Flex } from '@rebass/emotion';

import { forDesktopUp } from 'utils/styles/mixins';
import { getColumnSize } from 'utils/styles/grid';
import { space } from 'utils/theme';

export const Module = styled(Box)`
  width: 100%;
`;

export const CopyContainer = styled(Box)`
  max-width: ${getColumnSize(8)}px;
  margin: 0 auto ${space.regular}px auto;
`;

export const ColumnContainer = styled(Flex)`
  flex-flow: column;
  ${forDesktopUp(css`
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  `)};
`;

export const Column = styled(Flex)`
  width: 100%;
  flex-flow: column;
  ${forDesktopUp(css`
    width: 50%;
    justify-content: flex-start;
  `)};
`;

export const ImageContainer: StyledComponent<any, any, any> = styled(Box)`
  margin-bottom: ${space.small}px;
  ${forDesktopUp(css`
    margin-bottom: ${space.large}px;
    :last-child {
      margin-bottom: 0;
    }
  `)};
`;

export const Image = styled(Img)`
  width: 100%;
  cursor: pointer;
`;