Feature003

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

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