Decorations

<Grid className='b--callBox b--callBox--left' ta='l'>
  <Decorator
    size='1.25em'
    bd='left'
    rotate='45deg'
    transformOrigin='left bottom'
    mr='auto'
  />
  <Box p='30'>
    <Dummy />
  </Box>
  <Decorator
    size='1.25em'
    bd='left'
    rotate='-45deg'
    transformOrigin='left top'
    mr='auto'
  />
</Grid>
<Grid className='b--callBox b--callBox--right' as={Grid} ta='r'>
  <Decorator
    size='1.25em'
    bd='right'
    rotate='-45deg'
    transformOrigin='right bottom'
    ml='auto'
  />
  <Box p='30'>
    <Dummy length='s' />
  </Box>
  <Decorator
    size='1.25em'
    bd='right'
    rotate='45deg'
    transformOrigin='right top'
    ml='auto'
  />
</Grid>
<Flex variant='ltr' className='b--callBox b--callBox--top' jc='center' ta='c'>
  <Decorator
    as={FlexItem}
    fxsh='0'
    size='1.25em'
    bd='top'
    rotate='-45deg'
    transformOrigin='right top'
  />
  <FlexItem px='20' py='5'>
    <Dummy length='s' />
  </FlexItem>
  <Decorator
    as={FlexItem}
    fxsh='0'
    size='1.25em'
    bd='top'
    rotate='45deg'
    transformOrigin='left top'
  />
</Flex>
<Flex
  variant='ltr'
  className='b--callBox b--callBox--bottom'
  jc='center'
  ai='fe'
  ta='c'
>
  <Decorator
    as={FlexItem}
    fxsh='0'
    size='1.25em'
    bd='bottom'
    rotate='45deg'
    transformOrigin='right bottom'
  />
  <FlexItem px='20' py='5' fxg=''>
    <Dummy length='l' />
  </FlexItem>
  <Decorator
    as={FlexItem}
    fxsh='0'
    size='1.25em'
    bd='bottom'
    rotate='-45deg'
    transformOrigin='left bottom'
  />
</Flex>

<Box p='40' pos='r'>
  <Dummy />
  <Decorator size='1.25em' pos='a' t='0' l='0' bd='l,t' />
  <Decorator size='1.25em' pos='a' r='0' b='0' bd='r,b' />
</Box>
<Box p='40' pos='r'>
  <Dummy />
  <Decorator pos='a' t='0' l='0' w='1em' h='100%' bd='l,y' />
  <Decorator pos='a' t='0' r='0' w='1em' h='100%' bd='r,y' />
</Box>

<Grid gd='"content ." / auto 1fr'>
  <GridItem
    ga='content'
    minW='8em'
    maxW='30em'
    bgc='base-2'
    p='40'
    w='fit-content'
    bd='r'
    bdw='.5em'
  >
    <Dummy />
  </GridItem>
  <GridItem
    as={Decorator}
    ga='content'
    w='50%'
    maxW='12em'
    h='1rem'
    ml='auto'
    mt='auto'
    z='-1'
    bgc='hsl(var(--sh-hsl) / 0.25)'
    css={{ filter:'blur(4px)',rotate:'4deg', transformOrigin: 'left bottom', translate: '-4px -4px' }}
  />
</Grid>