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 '@/components/ex/Button/index.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>