Feature007

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Flex, Frame, Grid, TileGrid, Icon, Layer, BoxLink, Media, Stack, Text, Inline } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Feature007">
  <Container isWrapper="l" bgc="base" py="50" hasGutter>
    <TileGrid cols={['2', '3', '4']} rows={['4', '3']} g="20">
      <BoxLink
        href="#"
        gr={['1 / span 2', null, '1 / span 3']}
        gc={['1 / -1', '1 / span 2']}
        pos="relative"
        ov="hidden"
        bdrs="30"
        bxsh="20"
        set="var:hov"
        hasTransition
      >
        <Frame isLayer>
          <Media src="https://cdn.lism-css.com/random/img?category=v&r=1" alt="" width="960" height="640" hasTransition hov="in:zoom" />
        </Frame>
        <Layer bgc="black:20%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" py-s="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">黄昏の刻</Text>
            <Text class="u--trim" fz="s" o="p">豆本来の豊かな香りを、最大限に引き出す。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" my-s="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="arrow-right" fz="m" />
            </Stack>
          </Flex>
        </Grid>
      </BoxLink>
      <BoxLink
        href="#"
        gr={['3', '1 / span 2', '1 / span 3']}
        gc={['1 / -1', '3']}
        pos="relative"
        ov="hidden"
        bdrs="30"
        bxsh="20"
        set="var:hov"
        hasTransition
      >
        <Frame isLayer>
          <Media src="https://cdn.lism-css.com/random/img?category=v&r=2" alt="" width="960" height="640" hasTransition hov="in:zoom" />
        </Frame>
        <Layer bgc="black:20%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" py-s="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">静寂の朝</Text>
            <Text class="u--trim" fz="s" o="p">究極の食感を生み出す、スチームテクノロジー。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" my-s="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="arrow-right" fz="m" />
            </Stack>
          </Flex>
        </Grid>
      </BoxLink>
      <BoxLink
        href="#"
        gr={['4', '3', '1 / span 1']}
        gc={['1', null, '4']}
        pos="relative"
        ov="hidden"
        bdrs="30"
        bxsh="20"
        set="var:hov"
        hasTransition
      >
        <Frame isLayer>
          <Media src="https://cdn.lism-css.com/random/img?category=v&r=3" alt="" width="960" height="640" hasTransition hov="in:zoom" />
        </Frame>
        <Layer bgc="black:20%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" py-s="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">一滴の雫</Text>
            <Text class="u--trim" fz="s" o="p">思い通りの湯量を注げる、計算された注ぎ口。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" my-s="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="arrow-right" fz="m" />
            </Stack>
          </Flex>
        </Grid>
      </BoxLink>
      <BoxLink
        href="#"
        gr={['4', '3', '2 / span 2']}
        gc={['2', '2 / span 2', '4']}
        pos="relative"
        ov="hidden"
        bdrs="30"
        bxsh="20"
        set="var:hov"
        hasTransition
      >
        <Frame isLayer>
          <Media src="https://cdn.lism-css.com/random/img?category=v&r=4" alt="" width="960" height="640" hasTransition hov="in:zoom" />
        </Frame>
        <Layer bgc="black:20%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" py-s="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">森の吐息</Text>
            <Text class="u--trim" fz="s" o="p">部屋の隅々まで、きれいな空気を静かに届ける。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" my-s="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="arrow-right" fz="m" />
            </Stack>
          </Flex>
        </Grid>
      </BoxLink>
    </TileGrid>
  </Container>
</DemoLayout>

<style>
  @media (any-hover: hover) {
    .-hov\:in\:zoom {
      scale: var(--_isHov, 1.1);
    }
    .-hov\:in\:reverse {
      background-color: var(--_isHov, var(--white));
      color: var(--_isHov, var(--black));
    }
  }
</style>