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

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

const StyledTextPlaceholder = styled(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 }