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" setGutter>
		<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" as="a" isLinkBox href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" setHov setTransition 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--trimChildren">
						<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" as="a" isLinkBox href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" setHov setTransition 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--trimChildren">
						<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" as="a" isLinkBox href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" setHov setTransition 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--trimChildren">
						<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>