import { css } from '@emotion/core';
import styled from '@emotion/styled';

import { breakpoints } from 'utils/theme';

export const TextConentVerticalMobile = css`
  @media (max-width: ${breakpoints.medium}) {
    text-align: left;
    padding: 0;
  }
`;

export const MapVerticalMobile = css`
  @media (max-width: ${breakpoints.medium}) {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
  }
`;

export const MapModuleWrapper = styled.div`
  height: 100%;
  padding-top: 56.25%;
  position: relative;
`;

export const MapElement = css`
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
`;