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" setGutter>
			<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--trimChildren" g="40">
					<p>
						まるで高原の森にいるような、清々しく澄んだ空気を、あなたの部屋へ。
						高性能フィルターが、目に見えない微細な粒子や生活臭をしっかりと除去し、空間を清浄に保ちます。
						運転していることを忘れるほどの静音設計で、寝室や書斎にも最適。
						日々の暮らしに、穏やかな安らぎと、健やかな深呼吸をもたらす、静かなパートナーです。
					</p>
					<p>
						読書や仕事に集中したい時、ゆっくりとリラックスしたい夜。 あなたの過ごす時間に、最もふさわしい光の環境を創り出します。
						光が、日々の暮らしに、より深い奥行きと彩りを与えます。
					</p>
				</Stack>
			</Grid>
		</Container>
		<Grid gtc={['repeat(2, 1fr)', null, 'repeat(4, 1fr)']} g="20" my-s="50">
			<Frame as="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 as="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 as="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 as="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>