Testimonials002

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

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

<DemoLayout title='Testimonials002'>
	<Container bgc='gray:5%' py='50'>
		<Stack g='40'>
			<HTML.h lv='2' class='u-trim' fz='2xl' fw='bold' ta='center'>お客様の声</HTML.h>
			<Grid
				class='set-snap'
				g='30'
				p='30'
				bdrs='20'
				ov='auto'
				gaf='column'
				gac='var(--cols)'
				cols={['90%', '60%', 'min(35%, 24rem)']}
				tabIndex='0'
				style={{ 'scroll-padding': 'var(--p)', '--snapAlign': 'center' }}
			>
				<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='20' bxsh='20'>
					<Grid gtc='auto 1fr' ai='center' g='20'>
						<Frame tag='figure' ar='1/1' w='stretch' max-w='4.5rem' bdrs='99'>
							<Media src='https://cdn.lism-css.com/img/random-2510?r=1' width='960' height='640' />
						</Frame>
						<Stack w='stretch' g='20'>
							<HTML.p class='u-trim' fz='m' fw='bold'>自由な時間が増えた</HTML.p>
							<HTML.p class='u-trim' fz='s' o='-20'>30代 / 会社員</HTML.p>
						</Stack>
					</Grid>
					<HTML.p class='u-trim' fz='m' o='-10'>
						仕事から帰ると部屋がきれいになっているのが嬉しいです。面倒な掃除から解放されて、平日の夜にゆとりができました。
					</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='20' bxsh='20'>
					<Grid gtc='auto 1fr' ai='center' g='20'>
						<Frame tag='figure' ar='1/1' w='stretch' max-w='4.5rem' bdrs='99'>
							<Media src='https://cdn.lism-css.com/img/random-2510?r=2' width='960' height='640' />
						</Frame>
						<Stack w='stretch' g='20'>
							<HTML.p class='u-trim' fz='m' fw='bold'>まるでもう一人の自分</HTML.p>
							<HTML.p class='u-trim' fz='s' o='-20'>40代 / 主婦</HTML.p>
						</Stack>
					</Grid>
					<HTML.p class='u-trim' fz='m' o='-10'>
						材料を入れてボタンを押すだけで本格的な煮込み料理が完成。 火を使わないので、子供から目を離さずに調理できて安心です。
					</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='20' bxsh='20'>
					<Grid gtc='auto 1fr' ai='center' g='20'>
						<Frame tag='figure' ar='1/1' w='stretch' max-w='4.5rem' bdrs='99'>
							<Media src="https://cdn.lism-css.com/img/random-2510?r=3'" width='960' height='640' />
						</Frame>
						<Stack w='stretch' g='20'>
							<HTML.p class='u-trim' fz='m' fw='bold'>気づいた時にすぐ！</HTML.p>
							<HTML.p class='u-trim' fz='s' o='-20'>20代 / 大学生</HTML.p>
						</Stack>
					</Grid>
					<HTML.p class='u-trim' fz='m' o='-10'>
						気づいた時にサッと掃除できる手軽さが最高です。 コードレスなので、車の中の掃除にも使えて本当に便利だと思います。
					</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='20' bxsh='20'>
					<Grid gtc='auto 1fr' ai='center' g='20'>
						<Frame tag='figure' ar='1/1' w='stretch' max-w='4.5rem' bdrs='99'>
							<Media src='https://cdn.lism-css.com/img/random-2510?r=4' width='960' height='640' />
						</Frame>
						<Stack w='stretch' g='20'>
							<HTML.p class='u-trim' fz='m' fw='bold'>食後の時間にゆとりを</HTML.p>
							<HTML.p class='u-trim' fz='s' o='-20'>30代 / パート</HTML.p>
						</Stack>
					</Grid>
					<HTML.p class='u-trim' fz='m' o='-10'>
						毎日の食器洗いの手間がなくなり、食後に家族とゆっくり過ごせる時間が増えました。 手洗いよりきれいに洗える気がします。
					</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='20' bxsh='20'>
					<Grid gtc='auto 1fr' ai='center' g='20'>
						<Frame tag='figure' ar='1/1' w='stretch' max-w='4.5rem' bdrs='99'>
							<Media src='https://cdn.lism-css.com/img/random-2510?r=5' width='960' height='640' />
						</Frame>
						<Stack w='stretch' g='20'>
							<HTML.p class='u-trim' fz='m' fw='bold'>ヘルシーなのに本格的</HTML.p>
							<HTML.p class='u-trim' fz='s' o='-20'>40代 / 会社員</HTML.p>
						</Stack>
					</Grid>
					<HTML.p class='u-trim' fz='m' o='-10'>
						油を使わずに揚げ物ができるので、ヘルシーで後片付けも楽ちんです。 外はサクサク、中はジューシーで味も本格的です。
					</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' bgc='white' p='30' bdrs='20' bxsh='20'>
					<Grid gtc='auto 1fr' ai='center' g='20'>
						<Frame tag='figure' ar='1/1' w='stretch' max-w='4.5rem' bdrs='99'>
							<Media src='https://cdn.lism-css.com/img/random-2510?r=6' width='960' height='640' />
						</Frame>
						<Stack w='stretch' g='20'>
							<HTML.p class='u-trim' fz='m' fw='bold'>暮らしの良き相棒</HTML.p>
							<HTML.p class='u-trim' fz='s' o='-20'>20代 / ITエンジニア</HTML.p>
						</Stack>
					</Grid>
					<HTML.p class='u-trim' fz='m' o='-10'>
						声だけで音楽をかけたり天気を調べたりできるのが未来的。 朝の忙しい時間に、ニュースを聞きながら準備できるのがお気に入り。
					</HTML.p>
				</Grid>
			</Grid>
		</Stack>
	</Container>
</DemoLayout>