Section005

---
import DemoLayout from '@/layouts/DemoLayout.astro';
import Button from '@/components/ex/Button/index.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>