Feature001

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

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

<DemoLayout title="Feature001">
  <Container isWrapper="l" py="50" hasGutter>
    <Stack g="40">
      <Stack ai="center" g="15">
        <h2>新しい挑戦が生まれる</h2>
        <Text fz="s" my-s="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="var:hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="og">
            <Media src="https://cdn.lism-css.com/img/a-1.jpg" 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" my-s="auto" hasTransition hov="in:solid">
              <Inline fz="xs" fs="i">View More</Inline>
              <Icon icon="arrow-right" fz="xs" />
            </Flex>
          </Stack>
        </Grid>
        <Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="og">
            <Media src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width="960" height="640" />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">伝統文化を次世代へ</Text>
            <Text fz="s" lh="s" o="pp"> 古くから受け継がれてきた祭りを守り、子どもたちが地域の文化に触れる機会を創出します。 </Text>
            <Flex ai="center" jc="flex-end" g="15" my-s="auto" hasTransition hov="in:solid">
              <Inline fz="xs" fs="i">View More</Inline>
              <Icon icon="arrow-right" fz="xs" />
            </Flex>
          </Stack>
        </Grid>
        <Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="og">
            <Media src="https://cdn.lism-css.com/img/a-4.jpg" alt="" width="960" height="640" />
          </Frame>
          <Stack g="30" p="30" className="u--trimAll">
            <Text fz="m" fw="bold">安心して暮らせる街</Text>
            <Text fz="s" lh="s" o="pp">防犯パトロールや防災訓練を定期的に実施し、協力体制を強化しています。</Text>
            <Flex ai="center" jc="flex-end" g="15" my-s="auto" hasTransition hov="in:solid">
              <Inline fz="xs" fs="i">View More</Inline>
              <Icon icon="arrow-right" fz="xs" />
            </Flex>
          </Stack>
        </Grid>
      </Columns>
    </Stack>
  </Container>
</DemoLayout>

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