<ElementQuery />

import {ElementQuery} from '@sanity/ui'
import styled from 'styled-components'

const Responsive = styled.div`
  padding: 10px;

  [data-eq-min~="0"] > & {
    padding: 20px;
  }
  
  [data-eq-min~="1"] > & {
    padding: 30px;
  }
`

function ResponsiveItems () {
  return (
    <ElementQuery>
      <Responsive>foo</Responsive>
      <Responsive>bar</Responsive>
    </ElementQuery>
  )
}