Feature003

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

import { Stack, Container, Frame, Grid, Columns, Media, Flex, Layer, Center, Text, Inline, Group } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="Feature003">
  <Container isWrapper="l" py="50" hasGutter>
    <Grid gtc={['1fr', null, 'min(20vw, 20rem) 1fr 1fr']} gtr={['1fr', null, '1fr auto auto 1fr']} g={['40', null, '40 50']}>
      <Stack gr={['1', null, '2']} g="40" class="u--trimAll">
        <h2>目指す世界の先に</h2>
        <Text fz="s"> この地に受け継がれてきた伝統や祭りを大切に守り、次世代へと繋いでいきます。 地域の魅力を再発見し育む活動を行っています。 </Text>
      </Stack>
      <Columns gr={['2', null, '1 / -1']} gc={['1', null, '2 / -1']} cols={['1', '2']} g="40">
        <Grid gtr="auto 1fr" isBoxLink as="a" href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="3/2" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="2xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="30" p="30" class="u--trimAll">
            <Text fz="l" fw="bold">地域の未来を共に描く</Text>
            <Text fz="s" o="p">住民が主役となり、対話を通じて地域の課題解決を目指すプロジェクトです。</Text>
          </Stack>
        </Grid>
        <Grid gtr="auto 1fr" isBoxLink as="a" href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
          <Frame as="figure" ar="3/2" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="2xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="30" p="30" class="u--trimAll">
            <Text fz="l" fw="bold">伝統文化を次世代へ</Text>
            <Text fz="s" o="p"> この地に受け継がれてきた伝統や祭りを大切に守り、地域の魅力を再発見し、未来を育む活動を行っています。 </Text>
          </Stack>
        </Grid>
      </Columns>
      <Group gr="3">
        <Flex ai="center" g="15">
          <Button href="#" min-w={['100%', null, '150px']} p="15" bdrs="10">View More</Button>
        </Flex>
      </Group>
    </Grid>
  </Container>
</DemoLayout>