PageLinks04

---
import { ArrowRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="PageLinks04">
  <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="hov"
        hasTransition
      >
        <Frame isLayer>
          <Media
            src="https://images.pexels.com/photos/34235362/pexels-photo-34235362.jpeg?auto=compress&cs=tinysrgb&w=1920"
            alt=""
            width="960"
            height="640"
            hasTransition
            hov="in:zoom"
          />
        </Frame>
        <Layer bgc="black:40%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">満天の星</Text>
            <Text class="u--trim" fz="s" o="mp">街の灯りから離れ、空いっぱいの星を静かに望む夜。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" mbs="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={ArrowRightIcon} weight="bold" 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="hov"
        hasTransition
      >
        <Frame isLayer>
          <Media
            src="https://images.unsplash.com/photo-1614368558214-f8922bd49987?auto=format&fit=max&w=1920&q=80"
            alt=""
            width="960"
            height="640"
            hasTransition
            hov="in:zoom"
          />
        </Frame>
        <Layer bgc="black:40%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">静寂の朝</Text>
            <Text class="u--trim" fz="s" o="mp">朝の光の中で入る、貸切の露天風呂。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" mbs="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={ArrowRightIcon} weight="bold" 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="hov" hasTransition>
        <Frame isLayer>
          <Media
            src="https://images.unsplash.com/photo-1707597757577-1d88e59671c0?auto=format&fit=max&w=1920&q=80"
            alt=""
            width="960"
            height="640"
            hasTransition
            hov="in:zoom"
          />
        </Frame>
        <Layer bgc="black:40%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">旬の彩り</Text>
            <Text class="u--trim" fz="s" o="mp">地元の食材を活かした、季節の会席料理。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" mbs="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={ArrowRightIcon} weight="bold" 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="hov"
        hasTransition
      >
        <Frame isLayer>
          <Media
            src="https://images.unsplash.com/photo-1691917510639-ff3861ac903b?auto=format&fit=max&w=1920&q=80"
            alt=""
            width="960"
            height="640"
            hasTransition
            hov="in:zoom"
          />
        </Frame>
        <Layer bgc="black:40%" />
        <Grid gtr="auto auto" gtc="auto" p="30" h="100%" pos="relative">
          <Stack pos="relative" g="20" c="white" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">森の吐息</Text>
            <Text class="u--trim" fz="s" o="mp">木々のざわめきに耳を澄ます、四季の散策路。</Text>
          </Stack>
          <Flex ai="center" jc="flex-end" c="white" mbs="auto" g="20">
            <Inline fs="i">View More</Inline>
            <Stack p="15" bd bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={ArrowRightIcon} weight="bold" 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>