Section004

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

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

<DemoLayout title="Section004">
	<Container bgc="base">
		<Grid gt="repeat" cols={['2', null, '4']} rows={['4', null, '2']} g="5">
			<Stack
				gr={['2 / span 2', null, '1 / -1']}
				gc={['1 / -1', null, '2 / span 2']}
				g="40"
				bgc="base-2"
				ai="center"
				jc="center"
				p={['60 50', null, '60']}
			>
				<h2>思い出をかたちに</h2>
				<Stack g="30">
					<p>
						「何か新しいことを始めたい」と思っても、何から手をつければ良いか分からない。
						そんな時は、私たちにお任せください。あなたの興味関心を分析し、新しい趣味や学びの世界への扉を開きます。
					</p>
					<p>
						オンライン講座から地域のワークショップまで、あなたの可能性を広げるきっかけがここにあります。
						昨日より成長した自分に出会える毎日があなたを待っています。
					</p>
				</Stack>
				<Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
			</Stack>
			<Frame tag="figure">
				<Media src="https://cdn.lism-css.com/img/random-2510?r=1" alt="" width="960" height="640" />
			</Frame>
			<Frame tag="figure">
				<Media src="https://cdn.lism-css.com/img/random-2510?r=2" alt="" width="960" height="640" />
			</Frame>
			<Frame tag="figure">
				<Media src="https://cdn.lism-css.com/img/random-2510?r=3" alt="" width="960" height="640" />
			</Frame>
			<Frame tag="figure">
				<Media src="https://cdn.lism-css.com/img/random-2510?r=4" alt="" width="960" height="640" />
			</Frame>
		</Grid>
	</Container>
</DemoLayout>