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

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

export const Review = styled.div`
  margin-right: 50px;
  ${props => props.theme.default.fonts.ubuntuBold};
  
  ${mediaMax.large(css`
    margin-bottom: 30px;
  `)}
  
  svg,
  div {
    display: inline-block;
  }

  svg {
    vertical-align: initial;
    height: 35px;
    width: auto;
    margin-right: 15px;
  }
  
  a {
    display: block;
    ${props => props.theme.default.fonts.ubuntuBold};
  }
  
  span {
    color: ${props => props.theme.default.colors.yellow};
    padding-right: 5px;
  }
`;

export const PartnerWrapper = styled.div`
  flex: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  
  ${mediaMax.large(css`
    justify-content: space-around;

    svg,
    img {
      margin: 15px;
    }
  `)}

  
  svg,
  img {
    height: 40px;
    width: auto;
    display: inline-block;
  }
`;

export const PartnerContainer = styled(Container)`
  > div {
    display: block;
    text-align: center;

    ${mediaMin.large(css`
     display: flex;
     align-items: center;
    `)}
  }
`;