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

import { mediaMax } from '../../../../theme/mixins';
import { Tooltip } from '../../../shared/Tooltip.style';

export const TextBlocksWrapper = styled.div`
  display: flex;
  justify-content: space-between;

   ${mediaMax.medium(css`
     text-align: center;
     flex-direction: column;
   `)}

  > div {
    flex: 1;
    margin: 20px;

    ${Tooltip}:first-child {
      u {
        margin: 0;
      }
    }
  }

  h3 {
    margin-bottom: 15px;

    ${mediaMax.small(css`
      font-size: ${props => props.theme.default.fonts.sizes[4]};
    `)}
  }
`;