PageLinks01

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

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

<DemoLayout title="PageLinks01">
  <Container isWrapper="l" py="50" hasGutter>
    <Stack g="40">
      <Stack ai="center" g="15">
        <h2>事業の成長を、ひと続きで支える</h2>
        <Text fz="s" mbs="15" o="p">企画から運用まで、専門チームが一貫して伴走します。</Text>
      </Stack>
      <Columns cols={['1', null, '3']} g="40">
        <Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="og">
            <Media
              src="https://images.unsplash.com/photo-1672750771479-5ea73e9439ce?auto=format&fit=max&w=1920&q=80"
              alt=""
              width="960"
              height="640"
            />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">戦略・企画</Text>
            <Text fz="s" o="pp"> 事業の現状を丁寧にヒアリングし、目的に合った戦略とロードマップを描きます。 </Text>
            <Flex ai="center" jc="flex-end" g="15" mbs="auto" hasTransition hov="in:solid">
              <Inline fz="xs" fs="i">View More</Inline>
              <Icon icon={ArrowRightIcon} weight="bold" fz="xs" />
            </Flex>
          </Stack>
        </Grid>
        <Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="og">
            <Media
              src="https://images.pexels.com/photos/19306010/pexels-photo-19306010.jpeg?auto=compress&cs=tinysrgb&w=1920"
              alt=""
              width="960"
              height="640"
            />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">デザイン・開発</Text>
            <Text fz="s" hl="s" o="pp"> 使いやすさとブランドらしさを両立した、Webサイトやサービスを形にします。 </Text>
            <Flex ai="center" jc="flex-end" g="15" mbs="auto" hasTransition hov="in:solid">
              <Inline fz="xs" fs="i">View More</Inline>
              <Icon icon={ArrowRightIcon} weight="bold" fz="xs" />
            </Flex>
          </Stack>
        </Grid>
        <Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="og">
            <Media
              src="https://images.unsplash.com/photo-1684139517679-032b7213ad2e?auto=format&fit=max&w=1920&q=80"
              alt=""
              width="960"
              height="640"
            />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">運用・改善</Text>
            <Text fz="s" hl="s" o="pp">公開後も数値をもとに改善を重ね、成果につながる運用を支援します。</Text>
            <Flex ai="center" jc="flex-end" g="15" mbs="auto" hasTransition hov="in:solid">
              <Inline fz="xs" fs="i">View More</Inline>
              <Icon icon={ArrowRightIcon} weight="bold" fz="xs" />
            </Flex>
          </Stack>
        </Grid>
      </Columns>
    </Stack>
  </Container>
</DemoLayout>

<style>
  @media (any-hover: hover) {
    .-hov\:in\:solid {
      opacity: var(--_notHov, var(--o--ppp));
    }
  }
</style>