import { styled } from 'styleh-components'
import { H2 } from 'atoms/Text'

const UserLabel = styled.withComponent(H2)`
  font-size: rem(20);
  color: #2c2c2c;
  text-transform: capitalize;
  margin: 0;

  @tablet-or-smaller() {
    margin-bottom: rem(8);
  }
`

const HeaderWrapper = styled.div`
  position: relative;
  width: 100%;
  background: #ffffff;
  margin-bottom: rem(8);
  padding: rem(16);
  @phone-or-smaller(){
    padding: rem(16) rem(8);
  }
`

const Wrapper = styled.section``

export {
  UserLabel,
  HeaderWrapper,
  Wrapper,
}