Feature010

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

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

<DemoLayout title="Feature010">
	<Container isWrapper="l" py="50" setGutter>
		<Stack g="50">
			<HTML.h lv="2" fz="2xl" fw="bold" ta="center">厳選された商品</HTML.h>
			<Columns cols={['1', '2', '4']} gtr="auto auto auto" g="40">
				<Grid gtr="subgrid" gr="span 3" g="30" as="a" isLinkBox href="#" setHov>
					<Frame as="figure" ar="1/1" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?r=1" alt="" width="960" height="640" setTransition hov="to:zoom" />
					</Frame>
					<Stack g="inherit">
						<HTML.p class="u--trim" fz="l" fw="bold">ストームシールド</HTML.p>
						<HTML.p class="u--trim" fz="m" lh="s" o="-20">
							突然の雨風にも耐える高い耐久性。初心者でも簡単に設営できる、オールシーズン対応テント。
						</HTML.p>
					</Stack>
					<Flex g="20" ai="center" bd-b px="15" pb="10" setTransition hov="to:cAccent">
						<HTML.p fz="m" fx="1" fs="i">View Detail</HTML.p>
						<Icon icon="arrow-right" fz="m" />
					</Flex>
				</Grid>
				<Grid gtr="subgrid" gr="span 3" g="30" as="a" isLinkBox href="#" setHov>
					<Frame as="figure" ar="1/1" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?r=2" alt="" width="960" height="640" setTransition hov="to:zoom" />
					</Frame>
					<Stack g="inherit">
						<HTML.p class="u--trim" fz="l" fw="bold">リッジウォーカー</HTML.p>
						<HTML.p class="u--trim" fz="m" lh="s" o="-20">
							背中の蒸れを軽減する背面システムを採用。日帰りから小屋泊まで幅広く対応する人気モデル。
						</HTML.p>
					</Stack>
					<Flex g="20" ai="center" bd-b px="15" pb="10" setTransition hov="to:cAccent">
						<HTML.p fz="m" fx="1" fs="i">View Detail</HTML.p>
						<Icon icon="arrow-right" fz="m" />
					</Flex>
				</Grid>
				<Grid gtr="subgrid" gr="span 3" g="30" as="a" isLinkBox href="#" setHov>
					<Frame as="figure" ar="1/1" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?r=3" alt="" width="960" height="640" setTransition hov="to:zoom" />
					</Frame>
					<Stack g="inherit">
						<HTML.p class="u--trim" fz="l" fw="bold">オーロラダウン</HTML.p>
						<HTML.p class="u--trim" fz="m" lh="s" o="-20">
							高品質な750フィルパワーのダウンを使用。-5℃まで対応し、秋冬キャンプでも快適な眠りを。
						</HTML.p>
					</Stack>
					<Flex g="20" ai="center" bd-b px="15" pb="10" setTransition hov="to:cAccent">
						<HTML.p fz="m" fx="1" fs="i">View Detail</HTML.p>
						<Icon icon="arrow-right" fz="m" />
					</Flex>
				</Grid>
				<Grid gtr="subgrid" gr="span 3" g="30" as="a" isLinkBox href="#" setHov>
					<Frame as="figure" ar="1/1" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?r=4" alt="" width="960" height="640" setTransition hov="to:zoom" />
					</Frame>
					<Stack g="inherit">
						<HTML.p class="u--trim" fz="l" fw="bold">フィールドリラックスチェア</HTML.p>
						<HTML.p class="u--trim" fz="m" lh="s" o="-20">
							体を包み込むような快適な座り心地。軽量コンパクト設計で持ち運びも簡単。設営もあっという間です。
						</HTML.p>
					</Stack>
					<Flex g="20" ai="center" bd-b px="15" pb="10" setTransition hov="to:cAccent">
						<HTML.p fz="m" fx="1" fs="i">View Detail</HTML.p>
						<Icon icon="arrow-right" fz="m" />
					</Flex>
				</Grid>
			</Columns>
		</Stack>
	</Container>
</DemoLayout>

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