import React from 'react'
import { styled } from 'view-container'
import { Image } from 'atoms/Image'
import { Figure } from 'molecules/Figure'

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

const FigureItem = styled.figure`
  position: relative;
  flex: 0 0 33.33%;
  padding: 10px;
  margin: 0;
`

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

const ImageItem = styled.withComponent(Image)``

export { ImageGalleryWrapper, FigureItem, ImageWrapper, ImageItem }