import styled from 'styleh-components'

const ProductBlock = styled.section`
  display: grid;
  padding: 4px;
  grid-template-columns: repeat(12, 1fr);
  margin-left: 6px;
  background-color: #efefef;
  grid-gap: 8px;
`
const PlaceholderWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background: transparent;
  grid-column: auto / span 2;
  grid-row: auto / span 1;
`

const Placeholder = styled.span`
  width: 100%;
  height: 100%;
  border: 2px dashed #2c2c2c;
`

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 260px auto;
`

export { ProductBlock, PlaceholderWrapper, Placeholder, Wrapper }