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://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" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">Twilight Hour</Text>
            <Text class="u--trim" fz="s" o="p">Unlocking the rich aroma inherent in every bean.</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://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" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">Silent Morning</Text>
            <Text class="u--trim" fz="s" o="p">Steam technology that creates the ultimate texture.</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://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" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">A Single Drop</Text>
            <Text class="u--trim" fz="s" o="p">A precision-engineered spout for perfect water flow control.</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://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" pbs="15" pb="40">
            <Text class="u--trim" fz="2xl" fw="bold">Breath of the Forest</Text>
            <Text class="u--trim" fz="s" o="p">Quietly delivering clean air to every corner of the room.</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>