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

import { Flex } from '../shared/Flex.style';
import { mediaMin } from '../../theme/mixins';

export const BlockReview = styled.div`
  display: inline-flex;
  flex: 1;
  flex-basis: 100%;
  margin: 10px 0;
  flex-direction: column;
  border-radius: 12px;
  background-color: ${props => props.theme.default.colors.white};
  padding: 20px;

  ${mediaMin.small(css`
    flex-basis: 48%;
    margin: 1%;
  `)}

  img {
    height: 30px;
    width: auto;
  }

  p {
    margin-top: 10px; 
    flex: 1;
  }

  span {
    color: ${props => props.theme.default.colors.yellow};
  }

  ${Flex} {
    align-items: center;
  }
`;