Section005

---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Button } from '@lism-css/ui/astro';

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

<DemoLayout title="Section005">
	<Container bgc="base">
		<Grid gtr={['auto', '100svh']} gtc="auto">
			<Grid gr="1 / -1" gc="1 / -1" gtc="1fr 1fr" gtr="1fr 1fr">
				<Frame tag="figure" gr="1" gc="1">
					<Media src="https://cdn.lism-css.com/img/random-2510?category=japan&r=1" alt="" width="960" height="640" />
				</Frame>
				<Frame tag="figure" gr="1" gc="2">
					<Media src="https://cdn.lism-css.com/img/random-2510?category=japan&r=2" alt="" width="960" height="640" />
				</Frame>
				<Frame tag="figure" gr="2" gc="1">
					<Media src="https://cdn.lism-css.com/img/random-2510?category=japan&r=3" alt="" width="960" height="640" />
				</Frame>
				<Frame tag="figure" gr="2" gc="2">
					<Media src="https://cdn.lism-css.com/img/random-2510?category=japan&r=4" alt="" width="960" height="640" />
				</Frame>
			</Grid>
			<Grid pos="rel" gr="1 / -1" gc="1 / -1">
				<Layer gr="1 / -1" gc="1 / -1" blur="4px" bgc="black:30%" z="0" />
				<Grid gr="1 / -1" gc="1 / -1" ai="center" jc="center" p="40" z="1">
					<Stack g="40" ai="center" w="stretch" max-w="450px" bgc="base" bdrs="10" p={['40', '50']} z="1">
						<HTML.h lv="2" class="u-trim">心を整える時間</HTML.h>
						<Stack g="20">
							<p>忙しい毎日の中で、つい自分のことは後回しになりがち。 ほんの数分でも、自分の心と静かに向き合う時間を作りませんか？</p>
							<p>
								私たちのサービスは、専門家の監修によるガイド付きの瞑想や、心地よい自然音など、
								あなたの心を穏やかにするコンテンツを提供します。
							</p>
							<p>
								朝の始まりに、仕事の合間に、おやすみ前に。いつでもどこでも、手軽に心をリセットして、
								穏やかで前向きな自分を取り戻しましょう。
							</p>
						</Stack>
						<Flex w="stretch" jc="center">
							<Button layout="grid" href="#" w="100%" max-w="250px" py="15" bdrs="10">
								<span>View More</span>
							</Button>
						</Flex>
					</Stack>
				</Grid>
			</Grid>
		</Grid>
	</Container>
</DemoLayout>