Feature005

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

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

<DemoLayout title='Feature005'>
	<Container isWrapper='m' bgc='base' py='50' hasGutter>
		<HTML.h lv='2' ta='center' mb='40'>製品について</HTML.h>
		<Columns cols={[1, null, 2]} g={['30', null, '40']}>
			<Grid tag='a' isLinkBox href='#' gtc='1fr 2fr' bxsh='20' setTransition setHov hov='bxsh'>
				<Frame tag='figure' 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='s' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
						</Center>
					</Layer>
				</Frame>
				<Stack g='30' p='30'>
					<HTML.p class='u-trim' fz='m' fw='bold'>衣類をいたわる</HTML.p>
					<HTML.p class='u-trim' fz='s' o='-10'>繊維の奥の汚れを落とし、衣類の傷みを抑えながら、ふんわりと優しく洗い上げます。</HTML.p>
				</Stack>
			</Grid>
			<Grid tag='a' isLinkBox href='#' gtc='1fr 2fr' bxsh='20' setTransition setHov hov='bxsh'>
				<Frame tag='figure' 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='s' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
						</Center>
					</Layer>
				</Frame>
				<Stack g='30' p='30'>
					<HTML.p class='u-trim' fz='m' fw='bold'>空気をデザインする</HTML.p>
					<HTML.p class='u-trim' fz='s' o='-10'>快適な室温はもちろん、空気清浄機能でウイルスや花粉の活動を抑制します。</HTML.p>
				</Stack>
			</Grid>
			<Grid tag='a' isLinkBox href='#' gtc='1fr 2fr' bxsh='20' setTransition setHov hov='bxsh'>
				<Frame tag='figure' pos='rel'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=3' 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='s' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
						</Center>
					</Layer>
				</Frame>
				<Stack g='30' p='30'>
					<HTML.p class='u-trim' fz='m' fw='bold'>毎日ごちそうを</HTML.p>
					<HTML.p class='u-trim' fz='s' o='-10'>過熱水蒸気の力で、本格的なオーブン料理が誰でも簡単においしく作れます。</HTML.p>
				</Stack>
			</Grid>
			<Grid tag='a' isLinkBox href='#' gtc='1fr 2fr' bxsh='20' setTransition setHov hov='bxsh'>
				<Frame tag='figure' pos='rel'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=4' 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='s' fs='italic' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
						</Center>
					</Layer>
				</Frame>
				<Stack g='30' p='30'>
					<HTML.p class='u-trim' fz='m' fw='bold'>深呼吸したくなる空間へ</HTML.p>
					<HTML.p class='u-trim' fz='s' o='-10'>高性能フィルターが微細な粒子を99%捕集。静かな運転音で寝室にも最適。</HTML.p>
				</Stack>
			</Grid>
		</Columns>
	</Container>
</DemoLayout>

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