import { styled } from 'styleh-components'
import { Image } from 'atoms/Image'

const ImageGalleryWrapper = styled.div `
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
`

const FigureItem = styled.figure `
  position: relative;
  flex: 0 0 25%;
  padding: 10px;
  margin: 0;
  @tablet-or-smaller() {
    flex: 0 0 33.33%;
  }
  @phone-or-smaller() {
    flex: 0 0 50%;
  }
`

const ImageWrapper = styled.div `
  position: relative;
  border: solid 1px #ccc;
  border-radius: 4px;
`

const ImageItem = styled.withComponent(Image) ``

export { ImageGalleryWrapper, FigureItem, ImageWrapper, ImageItem }