import { styled } from 'styleh-components'
import {
  TextPlaceholder,
  RectanglePlaceholder,
  ImagePlaceholder,
} from 'atoms/Placeholder'

const Image = styled.withComponent(ImagePlaceholder)`
  margin-bottom: rem(8);
`

const StyledTextPlaceholder = styled.withComponent(TextPlaceholder)`
  margin-bottom: rem(8);
`

const DetailSection = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
`

const ImageSection = styled.div`
  flex: 0 0 rem(160);
  margin-bottom: rem(8);

  @phone-or-smaller() {
    flex: 0 0 rem(124);
  }
`

const Wrapper = styled.section`
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
`

export {
  Image,
  StyledTextPlaceholder,
  DetailSection,
  ImageSection,
  Wrapper,
}