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' hasGutter>
		<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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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>