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>Where New Challenges Begin</h2>
        <Text fz="s" mbs="15" o="p">We are committed to creating an environment where everyone can live with peace of mind.</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://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">Shaping the Future Together</Text>
            <Text fz="s" o="pp">
              A project where every resident plays a leading role, working together through dialogue to solve community challenges.
            </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://cdn.lism-css.com/img/2SvHdIk1KOOR.webp" alt="" width="960" height="640" />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">Passing Traditions to the Next Generation</Text>
            <Text fz="s" hl="s" o="pp">
              Preserving festivals passed down through generations and creating opportunities for children to experience local culture.
            </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://cdn.lism-css.com/img/VBUKkkSvtLey.webp" alt="" width="960" height="640" />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">A Safe Community for All</Text>
            <Text fz="s" hl="s" o="pp">We regularly conduct security patrols and disaster drills to strengthen community cooperation.</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>