Card

<Frame pos='r' ar='3/4' bdrs='30' bxsh='30' mx='a' maxW='xs'>
  <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
  <Layer bgc='rgb(0 0 0 / 20%)'/>
  <Layer layout={Stack} c='white' p='30' g='30'>
    <h3 className='u--trimHL -fz:l -mbs:a'>Card Title</h3>
    <Text className='u--trimHL' fz='s' lh='s' op='high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</Text>
    <Link href='#' d='f' c='black' bgc='white' td='n' lh='1' p='20' jc='c' bdrs='99' hov='fade'>Link Text</Link>
  </Layer>
</Frame>

<div class='l--frame -pos:r -ar -bdrs:30 -bxsh:30 -mx:a -maxW' style='--ar:3/4;--maxW:var(--size-xs)'>
  <img src='/img/img-1.jpg' width='960' height='640' />
  <div class='is--layer -bgc' style='--bgc:rgb(0 0 0 / 50%)'></div>
  <div class='l--stack is--layer -c -p:30 -g:30' style='--c:var(--white)'>
    <h3 class='u--trimHL -fz:l -mbs:a'>Card Title</h3>
    <p class='u--trimHL -fz:s -lh:s -op:high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
    <a class='-d:f -c -bgc -td:n -lh:1 -p:20 -jc:c -bdrs:99 -hov:fade' style='--c:var(--black);--bgc:var(--white)' href='#'>Link Text</a>
  </div>
</div>

<Stack p='10' g='20' c='text' bgc='base' bdrs='30' bxsh='30' className='u--outerR' maxW='xs' mx='a'>
  <Frame data-is-side ar='16/9' >
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' className='u--innerR'/>
  </Frame>
  <Stack g='30' p='10'>
    <h3 className='u--trimHL -fz:l'>Card Title</h3>
    <Text className='u--trimHL' fz='s' lh='s' op='high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</Text>
    <Link href='#' className='u--innerR' d='if' mis='auto' c='base' bgc='text' td='n' bd='b' lh='1' py='20' px='30' jc='c' hov='fade'>Link Text</Link>
  </Stack>
</Stack>

<div class='l--stack u--outerR -p:10 -g:20 -c:text -bgc:base -bdrs:30 -bxsh:30 -mx:a -maxW' style='--maxW:var(--size-xs)'>
  <div class='l--frame -ar:16/9' data-is-side='true'>
    <img class='u--innerR' src='/img/img-1.jpg' width='960' height='640' />
  </div>
  <div class='l--stack -g:30 -p:10'>
    <h3 class='u--trimHL -fz:l'>Card Title</h3>
    <p class='u--trimHL -fz:s -lh:s -op:high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
    <a class='u--innerR -d:if -mis:a -c:base -bgc:text -td:n -bd:b -lh:1 -py:20 -px:30 -jc:c -hov:fade' href='#'>Link Text</a>
  </div>
</div>

<WithSide tag='a' isLinkBox href='#_' hov={{bxsh: '40'}} trs sideW='50%' bgc='base' bdrs='20' bxsh='20' ov='h'>
  <Frame data-is-side ar='16/9' >
    <Media src='/img/img-4.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='30' p='30'>
    <h3 className='u--trimHL -fz:l'>Card Title</h3>
    <Text className='u--trimHL' fz='s' lh='s' op='high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</Text>
    <Text d='if' mis='auto' mbs='auto' c='inherit' td='n' bd='b' lh='1' p='10'>View More →</Text>
  </Stack>
</WithSide>

<WithSide isLinkBox href='#_' hov={{bxsh: '40'}} trs sideW='50%' bgc='base' bdrs='20' bxsh='20' ov='h'>
  <Frame data-is-side ar='16/9' pos='r'>
    <Media src='/img/img-5.jpg' alt='' width='960' height='640' />
    <Link href='#badge-link' pos='a' z='1' t='0' r='0' fz='s' bgc='black' c='white' m='20' px='20' bdrs='99' td='n' hov='fade'>Category</Link>
  </Frame>
  <Stack g='30' p='30'>
    <h3 className='u--trimHL -fz:l'>
      <Link className='u--overlayLink' href='#card-link'>Card Title (overlayLink)</Link>
    </h3>
    <Text className='u--trimHL' fz='s' lh='s' op='high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</Text>
    <Text d='if' mis='auto' mbs='auto' c='inherit' td='n' bd='b' lh='1' p='10'>View More →</Text>
  </Stack>
</WithSide>

<LinkBox layout={Flex}
  href='#_' c='text' bgc='base' p='10' bdrs='20'
  bd bdw='3px' bdc='base-2'
  hov={['set', {bdc: 'link'}]}
>
  <Frame w={['25%','30%']} ar='1/1' fxsh='0' bdrs='10'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack fxg='1' g='30' p='30'>
    <h3 className='u--trimHL -fz:l'>Card Title</h3>
    <Text className='u--trimHL' fz='s' lh='s' op='high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</Text>
    <Text d='if' mis='auto' mbs='auto' c='var(--_isHov, var(--c-link)) var(--_notHov, inherit)' td='n' bd='b' lh='1' p='10'>View More →</Text>
  </Stack>
</LinkBox>

<LinkBox layout={Grid}
  href='#_'
  gd={[`'img' '.'`, `'img .' / 200px 1fr`]}
  hov='set'
>
  <GridItem layout={Frame} ga='img' aslf='stretch' ar={['ogp', '1/1']} maxW='100%' pos='r' bdrs='20' bxsh='10'>
    <Media css={{scale: 'var(--_isHov, 1.25)'}} trs src='/img/img-1.jpg' alt='' width='960' height='640' />
  </GridItem>
  <Stack g='30' py='30' px={['20','30']} op='var(--_isHov, 0.75)'>
    <h3 className='u--trimHL -fz:l'>Card Title</h3>
    <Text className='u--trimHL' fz='s' lh='s' op='high'>ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</Text>
    <Text d='if' mis='auto' mbs='auto' c='inherit' td='n' bd='b' lh='1' p='10'>View More →</Text>
  </Stack>
</LinkBox>

<LinkBox href='#card-a' pos='r' bdrs='20' bxsh='20' ov='h' hov='set' maxW='xs' mx='a'>
  <Frame ar='1/1'>
    <img src='/img/img-5.jpg' alt='' width='960' height='640' />
  </Frame>
  <Layer bgc='rgba(0 0 0 / 10%)'/>
  <Stack pos='a' b='0' w='100%' p={['20', '30']} bgc='rgb(255 255 255 / 20%)'>
    <Layer blur='6px' brightness='1.1'/>
    <Box pos='relative' z='1' c='white' lh='s' css={{textShadow: '0 0 1em rgb(0 0 0 / 20%)'}}>
      <h3 className='-fz:l'>Card Title</h3>
      <Grid trs hov='get:slide'>
        <Box ov='h'>
          <Dummy py='5' fz='s' lh='xs'/>
        </Box>
      </Grid>
      <Text fz='xs' op='high'>2000.01.01 / Author</Text>
    </Box>
  </Stack>
</LinkBox>

.-hov\:get\:slide {
  opacity: var(--_notHov, 0);
  grid-template-rows: var(--_isHov, 1fr) var(--_notHov, 0fr);
  transition-property: margin-block, padding-block, opacity, grid-template-rows;
}