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" setGutter>
		<HTML.h lv="2" ta="center" mb="40">製品について</HTML.h>
		<Columns cols={[1, null, 2]} g={['30', null, '40']}>
			<Grid as="a" isLinkBox href="#" gtc="1fr 2fr" bxsh="20" setTransition setHov hov="bxsh">
				<Frame as="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 as="a" isLinkBox href="#" gtc="1fr 2fr" bxsh="20" setTransition setHov hov="bxsh">
				<Frame as="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 as="a" isLinkBox href="#" gtc="1fr 2fr" bxsh="20" setTransition setHov hov="bxsh">
				<Frame as="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 as="a" isLinkBox href="#" gtc="1fr 2fr" bxsh="20" setTransition setHov hov="bxsh">
				<Frame as="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>