import styled from 'styled-components'
import theme from 'theme'

export const WrapperTitle = styled.h3`
  color: ${theme.textStyles.boxTitle.color};
  font: ${theme.textStyles.boxTitle.font};
  letter-spacing: 1px;
  margin: 10px 0 0;
  text-align: center;
  text-transform: uppercase;
`

export const WrapperText = styled.p`
  color: ${theme.textStyles.boxText.color};
  display: inline-block;
  font: ${theme.textStyles.boxText.font};
  padding: 0 50px 30px;
  text-align: center;
  width: 250px;
`

export const Graphic = styled.div`
  background: url('${props => props.graphicsUrl}') no-repeat;
  background-size: contain;
  height: 200px;
  margin: 50px 25% 0;
  padding: 0 0 20px;
`
