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

import { mediaMax, sizes } from '../../../../theme/mixins';

export const WhyBlock = styled.div`
  flex: 1;
  width: 100%;
  margin: 0 30px;
  display: flex;
  flex-direction: column;
  
   
  img {
    padding: 15px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }
  
  @media (max-width: ${sizes.large}px) and (min-width: ${sizes.medium}px){
    flex-direction: row;
    align-items: center;

    img {
      max-width: 220px;
    }
  }

`;

export const WhyWrapper = styled.div`
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  
   ${mediaMax.large(css`
    align-items: center;
    flex-direction: column;
  `)}
`;