import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Box } from '@rebass/emotion';
import theme, { breakpoints } from 'utils/theme';

import * as Styles from './text-centred.styles';

export const ModuleWrapper = styled(Box)`
  position: relative;
`;

export const TextBlock = css`
  position: relative;
  text-align: center;
  padding: ${theme.space[1]}px;
  padding: 30px;
  margin: -40px 20px 0;

  @media (min-width: ${breakpoints.medium}) {
    padding: ${theme.space[3]}px;
  }
`;

export const TextBlockPortrait = css`
  ${Styles.TextBlock}
  margin: -100px auto 0;
  max-width: 780px;
`;

export const ImageContainer = css`
  max-width: 480px;
  margin: 0 auto;
`;