PageLinks03

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

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

<DemoLayout title="PageLinks03">
  <Container isWrapper="l" py="50" hasGutter>
    <Stack g="50">
      <Heading class="u--trim" level="2" fz="2xl" ta="center">空間をデザインする</Heading>
      <Columns cols={[1, null, 3]} g="30" rg="40">
        <Stack g="20">
          <Frame as="a" isBoxLink href="#" pos="relative" ar={['1/1', null, '3/4']} bdrs="10" bxsh="30" td="none" set="hov">
            <Media
              isLayer
              src="https://images.unsplash.com/photo-1503719870153-8100f1f89185?auto=format&fit=max&w=1920&q=80"
              alt=""
              width="960"
              height="640"
              hasTransition
              hov="in:zoom"
            />
            <Layer bgc="rgb(0 0 0 / 20%)" />
            <Stack pos="relative" h="100%" jc="flex-end" c="white" p="30" g="20" mbs="auto">
              <Grid gtc="1fr auto" ai="end" g="30">
                <Stack g="20" class="u--trimAll">
                  <Text fz="l" fw="bold" hl="s">オフィス</Text>
                  <Text fz="s" hl="s" o="p">Office</Text>
                </Stack>
                <Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" c="white" hasTransition hov="in:reverse">
                  <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
                </Flex>
              </Grid>
            </Stack>
          </Frame>
          <Text fz="s">集中とコミュニケーションが両立する、働きやすいオフィスを設計します。</Text>
        </Stack>
        <Stack g="20">
          <Frame as="a" isBoxLink href="#" pos="relative" ar={['1/1', null, '3/4']} bdrs="10" bxsh="30" td="none" set="hov">
            <Media
              isLayer
              src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=max&w=1920&q=80"
              alt=""
              width="960"
              height="640"
              hasTransition
              hov="in:zoom"
            />
            <Layer bgc="rgb(0 0 0 / 20%)" />
            <Stack pos="relative" h="100%" jc="flex-end" c="white" p="30" g="20" mbs="auto">
              <Grid gtc="1fr auto" ai="end" g="30">
                <Stack g="20" class="u--trimAll">
                  <Text fz="l" fw="bold" hl="s">住宅</Text>
                  <Text fz="s" hl="s" o="p">Residential</Text>
                </Stack>
                <Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" c="white" hasTransition hov="in:reverse">
                  <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
                </Flex>
              </Grid>
            </Stack>
          </Frame>
          <Text fz="s">光と水辺を取り込み、家族がくつろげる住まいを設計します。</Text>
        </Stack>
        <Stack g="20">
          <Frame as="a" isBoxLink href="#" pos="relative" ar={['1/1', null, '3/4']} bdrs="10" bxsh="30" td="none" set="hov">
            <Media
              isLayer
              src="https://images.unsplash.com/photo-1569762848460-1e6301bdbea3?auto=format&fit=max&w=1920&q=80"
              alt=""
              width="960"
              height="640"
              hasTransition
              hov="in:zoom"
            />
            <Layer bgc="rgb(0 0 0 / 20%)" />
            <Stack pos="relative" h="100%" jc="flex-end" c="white" p="30" g="20" mbs="auto">
              <Grid gtc="1fr auto" ai="end" g="30">
                <Stack g="20" class="u--trimAll">
                  <Text fz="l" fw="bold" hl="s">カフェ</Text>
                  <Text fz="s" hl="s" o="p">Café</Text>
                </Stack>
                <Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" c="white" hasTransition hov="in:reverse">
                  <Icon icon={ArrowRightIcon} weight="bold" fz="s" />
                </Flex>
              </Grid>
            </Stack>
          </Frame>
          <Text fz="s">つい長居したくなる、居心地のよいカフェやレストランを手がけます。</Text>
        </Stack>
      </Columns>
    </Stack>
  </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>