Card

<Frame pos='rel' ar='3/4' bdrs='30' bxsh='30' mx='auto' max-w='xs'>
  <Media src='https://cdn.lism-css.com/img/a-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-trim -fz:l -my-s:auto'>Card Title</h3>
    <HTML.p className='u-trim' fz='s' lh='s' o='-10'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</HTML.p>
    <HTML.a layout='center' href='#' c='black' bgc='white' td='none' lh='1' p='20' bdrs='99' hov='o'>Link Text</HTML.a>
  </Layer>
</Frame>

<div class='l--frame -pos:rel -ar -bdrs:30 -bxsh:30 -mx:auto -max-w' style='--ar:3/4;--max-w:var(--sz--xs)'>
  <img class='a--media' src='https://cdn.lism-css.com/img/a-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-trim -fz:l -my-s:auto'>Card Title</h3>
    <p class='u-trim -fz:s -lh:s -o:mild'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
    <a class='l--center -c -bgc -td:none -lh:1 -p:20 -bdrs:99 -hov:o' 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='set-innerRs' max-w='xs' mx='auto'>
  <Frame isSide ar='16/9' >
    <Media src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' bdrs='inner'/>
  </Frame>
  <Stack g='30' p='10'>
    <h3 className='u-trim -fz:l'>Card Title</h3>
    <HTML.p className='u-trim' fz='s' lh='s' o='-10'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</HTML.p>
    <HTML.a href='#' bdrs='inner' d='in-flex' mx-s='auto' c='base' bgc='text' td='none' bd-b lh='1' py='20' px='30' jc='center' hov='o'>Link Text</HTML.a>
  </Stack>
</Stack>

<div class='l--stack set-innerRs -p:10 -g:20 -c:text -bgc:base -bdrs:30 -bxsh:30 -mx:auto -max-w' style='--max-w:var(--sz--xs)'>
  <div class='l--frame is--side -ar:16/9'>
    <img class='a--media -bdrs:inner' src='https://cdn.lism-css.com/img/a-1.jpg' width='960' height='640' />
  </div>
  <div class='l--stack -g:30 -p:10'>
    <h3 class='u-trim -fz:l'>Card Title</h3>
    <p class='u-trim -fz:s -lh:s -o:mild'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</p>
    <a class='-bdrs:inner -d:i-f -mx-s:auto -c:base -bgc:text -td:none -bd-be -lh:1 -py:20 -px:30 -jc:center -hov:o' href='#'>Link Text</a>
  </div>
</div>

<WithSide tag='a' isLinkBox href='#_' hov='bxsh' setTransition sideW='50%' bgc='base' bdrs='20' bxsh='10' ov='hidden'>
  <Frame isSide ar='16/9' >
    <Media src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='30' p='30'>
    <h3 className='u-trim -fz:l'>Card Title</h3>
    <HTML.p className='u-trim' fz='s' lh='s' o='-10'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</HTML.p>
    <HTML.p d='in-flex' mx-s='auto' my-s='auto' c='inherit' td='none' bd-b lh='1' p='10'>View More →</HTML.p>
  </Stack>
</WithSide>

<WithSide isLinkBox href='#_' hov='bxsh' setTransition sideW='50%' bgc='base' bdrs='20' bxsh='10' ov='hidden'>
  <Frame isSide ar='16/9' pos='rel'>
    <Media src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
    <HTML.a href='#badge-link' pos='abs' z='1' t='0' r='0' fz='s' bgc='black' c='white' m='20' px='20' bdrs='99' td='none' hov='o'>Category</HTML.a>
  </Frame>
  <Stack g='30' p='30'>
    <h3 className='u-trim -fz:l'>
      <HTML.a className='u-expandedLink' href='#card-link'>Card Title (overlayLink)</HTML.a>
    </h3>
    <HTML.p className='u-trim' fz='s' lh='s' o='-10'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。</HTML.p>
    <HTML.span d='in-flex' mx-s='auto' my-s='auto' c='inherit' td='none' bd-b lh='1' p='10'>View More →</HTML.span>
  </Stack>
</WithSide>

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

<LinkBox
  layout='grid'
  href='#_'
  gt={[`'img' '.'`, `'img .' / 200px 1fr`]}
  setHov
>
  <Frame ga='img' aslf='stretch' ar={['og', '1/1']} max-w='100%' pos='rel' bdrs='20' bxsh='10'>
    <Media css={{scale: 'var(--isHov_, 1.25)'}} setTransition src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Stack g='30' py='30' px={['20','30']} o='var(--isHov_, 0.75)'>
    <h3 className='u-trim -fz:l'>Card Title</h3>
    <HTML.p className='u-trim' fz='s' lh='s' o='-10'>ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。</HTML.p>
    <HTML.span d='in-flex' mx-s='auto' my-s='auto' c='inherit' td='none' bd-b lh='1' p='10'>View More →</HTML.span>
  </Stack>
</LinkBox>

<LinkBox href='#card-a' pos='rel' bdrs='20' bxsh='20' ov='hidden' setHov max-w='xs' mx='auto'>
  <Frame ar='1/1'>
    <img src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
  </Frame>
  <Layer bgc='rgba(0 0 0 / 10%)'/>
  <Stack pos='abs' b='0' w='100%' p={['20', '30']} bgc='rgb(255 255 255 / 20%)'>
    <Layer blur='6px' brightness='1.1'/>
    <Box pos='rel' z='1' c='white' lh='s' css={{textShadow: '0 0 1em rgb(0 0 0 / 20%)'}}>
      <h3 className='u-trim -fz:l'>Card Title</h3>
      <Grid setTransition hov='to:slide' my='10'>
        <Box ov='hidden'>
          <Dummy py='5' fz='s' lh='xs'/>
        </Box>
      </Grid>
      <HTML.div className='u-trim' fz='xs' o='-10'>2000.01.01 / Author</HTML.div>
    </Box>
  </Stack>
</LinkBox>

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