Feature002

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

import { Stack, Container, Frame, Columns, Grid, Media, HTML, Flex, Icon, Layer, Center } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title='Feature002'>
	<Container isWrapper='l' py='50' hasGutter>
		<Stack g='40'>
			<Grid gtc={['1fr', null, 'auto 1fr']} g='inherit'>
				<Stack class='u-trimItems' g='20'>
					<h2>私たちの取り組み</h2>
					<HTML.p fz='l' ff='accent' o='-20'>Our efforts</HTML.p>
				</Stack>
				<Flex class='u-trimItems' jc={['s', null, 'end']}>
					<HTML.p max-w='32rem' fz='s' o='-10'>
						地域の未来を見据え、持続可能な社会の実現に向けた取り組みを進めています。
						環境保護や地域活性化を通じて、次世代に誇れる街づくりを目指します。
					</HTML.p>
				</Flex>
			</Grid>
			<Columns cols={[2, null, 4]} g={['30', '40']}>
				<Grid tag='a' isLinkBox href='#' g='20' ai='start' setHov>
					<Frame tag='figure' ar='1/1' bdrs='10' pos='rel'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' width='960' height='640' setTransition hov='to:zoom' />
						<Layer setTransition hov='to:show' bgc='rgb(0 0 0 / 30%)' blur='4px'>
							<Center h='100%' c='white'>
								<HTML.span fz='xl' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Flex ai='center' jc='flex-s' g='15' fz='m' lh='s'>
						<HTML.span>地域の未来を共に描く</HTML.span>
						<Icon icon='arrow-right' mx-s='auto' setTransition hov='to:solid' />
					</Flex>
				</Grid>
				<Grid tag='a' isLinkBox href='#' g='20' ai='start' setHov>
					<Frame tag='figure' ar='1/1' bdrs='10' pos='rel'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' width='960' height='640' setTransition hov='to:zoom' />
						<Layer setTransition hov='to:show' bgc='rgb(0 0 0 / 30%)' blur='4px'>
							<Center h='100%' c='white'>
								<HTML.span fz='xl' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Flex ai='center' jc='flex-s' g='15' fz='m' lh='s'>
						<HTML.span>誰もが集える憩いの場</HTML.span>
						<Icon icon='arrow-right' mx-s='auto' setTransition hov='to:solid' />
					</Flex>
				</Grid>
				<Grid tag='a' isLinkBox href='#' g='20' ai='start' setHov>
					<Frame tag='figure' ar='1/1' bdrs='10' pos='rel'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=3' alt='' width='960' height='640' setTransition hov='to:zoom' />
						<Layer setTransition hov='to:show' bgc='rgb(0 0 0 / 30%)' blur='4px'>
							<Center h='100%' c='white'>
								<HTML.span fz='xl' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Flex ai='center' jc='flex-s' g='15' fz='m' lh='s'>
						<HTML.span>地元の恵みを食卓へ</HTML.span>
						<Icon icon='arrow-right' mx-s='auto' setTransition hov='to:solid' />
					</Flex>
				</Grid>
				<Grid tag='a' isLinkBox href='#' g='20' ai='start' setHov>
					<Frame tag='figure' ar='1/1' bdrs='10' pos='rel'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=4' alt='' width='960' height='640' setTransition hov='to:zoom' />
						<Layer setTransition hov='to:show' bgc='rgb(0 0 0 / 30%)' blur='4px'>
							<Center h='100%' c='white'>
								<HTML.span fz='xl' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Flex ai='center' jc='flex-s' g='15' fz='m' lh='s'>
						<HTML.span>緑豊かな景観づくり</HTML.span>
						<Icon icon='arrow-right' mx-s='auto' setTransition hov='to:solid' />
					</Flex>
				</Grid>
			</Columns>
		</Stack>
	</Container>
</DemoLayout>

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