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

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

export const CaseBlock = styled.div`
  box-shadow: ${props => props.theme.default.shadow};
  border-radius: 12px;
  overflow: hidden;
  max-width: 450px;
  
  ${mediaMax.medium(css`
     margin-bottom: 40px;
  `)} 
  
  img {
    width: 100%;
  }
  
  div {
    padding: 30px 20px 10px;
  }
`;

export const AmountBlock = styled.div`
  h3 {
    display: inline-block;
    background: ${props => props.theme.default.gradient.blue};
    color: ${props => props.theme.default.colors.white};
    border-radius: 4px;
    padding: 2px 10px;
  }
  
  i {
    color: ${props => props.theme.default.colors.blue};
    margin-right: 5px;
  }
  
  div {
    margin: 20px 0;
  }
`;

export const CaseWrapper = styled.div`
  display: flex;
  justify-content: center;
  
   ${mediaMax.medium(css`
    align-items: center;
    flex-direction: column;
  `)}  
   
  > div {
    flex: 1;
    margin-left: 15px;
    margin-right: 15px;
       
     ${mediaMin.large(css`
       margin-left: 30px;
       margin-right: 30px;
    `)}
  }
`;