Feature001

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

import { HTML, Stack, Container, Frame, Columns, Grid, Media, Flex, Icon } 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>
				<HTML.p fz='s' my-s='15' o='-10'>誰もが安心して暮らせる環境づくりに力を入れています。</HTML.p>
			</Stack>
			<Columns cols={['1', null, '3']} g='40'>
				<Grid g='0' tag='a' isLinkBox href='#' gtr='subgrid' gr='span 2' bdrs='10' bxsh='20' ov='hidden' setHov setTransition hov='bxsh'>
					<Frame tag='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-trimItems'>
						<HTML.p fz='m' fw='bold'>地域の未来を共に描く</HTML.p>
						<HTML.p fz='s' o='-20'> 住民一人ひとりが主役となり、対話を通じて地域の課題解決を目指すプロジェクトです。 </HTML.p>
						<Flex ai='center' jc='flex-e' g='15' my-s='auto' setTransition hov='to:solid'>
							<HTML.span fz='xs' fs='i'>View More</HTML.span>
							<Icon icon='arrow-right' fz='xs' />
						</Flex>
					</Stack>
				</Grid>
				<Grid g='0' tag='a' isLinkBox href='#' gtr='subgrid' gr='span 2' bdrs='10' bxsh='20' ov='hidden' setHov setTransition hov='bxsh'>
					<Frame tag='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-trimItems'>
						<HTML.p fz='m' fw='bold'>伝統文化を次世代へ</HTML.p>
						<HTML.p fz='s' lh='s' o='-20'> 古くから受け継がれてきた祭りを守り、子どもたちが地域の文化に触れる機会を創出します。 </HTML.p>
						<Flex ai='center' jc='flex-e' g='15' my-s='auto' setTransition hov='to:solid'>
							<HTML.span fz='xs' fs='i'>View More</HTML.span>
							<Icon icon='arrow-right' fz='xs' />
						</Flex>
					</Stack>
				</Grid>
				<Grid g='0' tag='a' isLinkBox href='#' gtr='subgrid' gr='span 2' bdrs='10' bxsh='20' ov='hidden' setHov setTransition hov='bxsh'>
					<Frame tag='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-trimItems'>
						<HTML.p fz='m' fw='bold'>安心して暮らせる街</HTML.p>
						<HTML.p fz='s' lh='s' o='-20'>防犯パトロールや防災訓練を定期的に実施し、協力体制を強化しています。</HTML.p>
						<Flex ai='center' jc='flex-e' g='15' my-s='auto' setTransition hov='to:solid'>
							<HTML.span fz='xs' fs='i'>View More</HTML.span>
							<Icon icon='arrow-right' fz='xs' />
						</Flex>
					</Stack>
				</Grid>
			</Columns>
		</Stack>
	</Container>
</DemoLayout>

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