Section016

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

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

<DemoLayout title='Section016'>
	<Container py='50'>
		<Container isWrapper='m' hasGutter>
			<Grid gtc={['auto', null, 'auto 1fr']} g='50 60'>
				<Stack g='30' min-w='16rem' ff='accent' fs='i' c='gray'>
					<HTML.h lv='2' class='u-trim' fz='5xl' fw='bold'>Relaxing</HTML.h>
					<HTML.p class='u-trim' fz='l'>深呼吸したくなる、澄んだ空気</HTML.p>
				</Stack>
				<Stack class='u-trimItems' g='40'>
					<p>
						まるで高原の森にいるような、清々しく澄んだ空気を、あなたの部屋へ。
						高性能フィルターが、目に見えない微細な粒子や生活臭をしっかりと除去し、空間を清浄に保ちます。
						運転していることを忘れるほどの静音設計で、寝室や書斎にも最適。
						日々の暮らしに、穏やかな安らぎと、健やかな深呼吸をもたらす、静かなパートナーです。
					</p>
					<p>
						読書や仕事に集中したい時、ゆっくりとリラックスしたい夜。 あなたの過ごす時間に、最もふさわしい光の環境を創り出します。
						光が、日々の暮らしに、より深い奥行きと彩りを与えます。
					</p>
				</Stack>
			</Grid>
		</Container>
		<Grid gtc={['repeat(2, 1fr)', null, 'repeat(4, 1fr)']} g='20' my-s='50'>
			<Frame tag='figure' ar='4/3' gr={['1', null, '1']} gc={['1', null, '1']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' ar='4/3' gr={['1', null, '1']} gc={['2', null, '2']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' ar='4/3' gr={['2', null, '1']} gc={['1', null, '3']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=3' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' ar='4/3' gr={['2', null, '1']} gc={['2', null, '4']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=4' alt='' width='960' height='640' />
			</Frame>
		</Grid>
	</Container>
</DemoLayout>