import { styled } from 'styleh-components'
import { Image } from 'atoms/Image'
import { media } from '@skava/styleh-toolset'

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%;
  }
  ${media.phoneOrSmaller`
    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 }