PageLinks05

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

import { Stack, BoxLink, Container, Frame, Columns, Media, Flex, Text, Heading } from 'lism-css/astro';
---

<DemoLayout title="PageLinks05">
  <Container isWrapper="l" bgc="base-2" py="50" hasGutter>
    <Stack g="40">
      <Heading level="2" fz="2xl" fw="bold" ta="center">商品カテゴリ</Heading>
      <Stack g="40">
        <Columns cols={['1', '2', '4']} g="40">
          <BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
            <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
              <Media
                src="https://images.unsplash.com/photo-1564584217132-2271feaeb3c5?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
                hasTransition
                hov="in:zoom"
              />
            </Frame>
            <Stack g="20">
              <Text class="u--trim" fz="m" fw="bold">アパレル</Text>
              <Text class="u--trim" fz="s" o="p">素材とシルエットにこだわった、毎日のコーディネートの主役になる服。</Text>
            </Stack>
            <Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
              <Text fz="s">View More</Text>
            </Flex>
          </BoxLink>
          <BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
            <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
              <Media
                src="https://images.unsplash.com/photo-1587563871167-1ee9c731aefb?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
                hasTransition
                hov="in:zoom"
              />
            </Frame>
            <Stack g="20">
              <Text class="u--trim" fz="m" fw="bold">シューズ</Text>
              <Text class="u--trim" fz="s" o="p">歩きやすさと見た目の美しさを両立した、毎日履きたくなる一足。</Text>
            </Stack>
            <Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
              <Text fz="s">View More</Text>
            </Flex>
          </BoxLink>
          <BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
            <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
              <Media
                src="https://images.unsplash.com/photo-1591209608777-fb022eac7112?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
                hasTransition
                hov="in:zoom"
              />
            </Frame>
            <Stack g="20">
              <Text class="u--trim" fz="m" fw="bold">アクセサリ</Text>
              <Text class="u--trim" fz="s" o="p">さりげなく装いを引き立てる、長く使えるデザインのアクセサリ。</Text>
            </Stack>
            <Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
              <Text fz="s">View More</Text>
            </Flex>
          </BoxLink>
          <BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
            <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
              <Media
                src="https://images.unsplash.com/photo-1564836950275-14737b1b6af7?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
                hasTransition
                hov="in:zoom"
              />
            </Frame>
            <Stack g="20">
              <Text class="u--trim" fz="m" fw="bold">コスメ</Text>
              <Text class="u--trim" fz="s" o="p">肌にやさしい処方と上質な香りで、毎日のケアを心地よい時間に。</Text>
            </Stack>
            <Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
              <Text fz="s">View More</Text>
            </Flex>
          </BoxLink>
        </Columns>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>

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