Section006

---
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='Section006'>
	<Container bgc='base'>
		<Grid
			gtr={['repeat(2, 1fr)', null, 'repeat(4, auto)']}
			gtc={['1fr minmax(70vw, 20rem) 1fr', null, 'minmax(320px, 1fr) 0.5fr 0.5fr']}
			h={['auto', null, '100svh']}
		>
			<Stack gr='1 / -1' gc={['2 / span 1', null, '1 / span 1']} g='40' ai='center' w='stretch' bgc='black:35%' p='60 50' pos='rel' z='1'>
				<Layer blur='8px' z='0' />
				<Stack g='40' c='white' ai='center' jc='center' h='100%' z='1'>
					<h2 class='u-trim'>とっておきの週末</h2>
					<Stack g='20'>
						<p>
							いつもの週末を、忘れられない特別な一日に。ガイドブックには載っていない、
							地域に根差したユニークな体験を予約できるサービスです。
						</p>
						<p>日常から少し離れて、心に残る思い出を作りませんか。 あなたの知らない、まちの魅力がきっと見つかります。</p>
					</Stack>
					<Flex w='100%' jc='center'>
						<Button
							layout='grid'
							variant='outline'
							href='#'
							gtc='1em 1fr 1em'
							jc='center'
							c='white'
							minW={['100%', null, '200px']}
							p='15'
							bdrs='10'
						>
							<HTML.span gc='2'>View More</HTML.span>
						</Button>
					</Flex>
				</Stack>
			</Stack>
			<Frame tag='figure' gr={['1 / span 2', null, '1 / -1']} gc={['2', null, '1']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' gr={['1', null, '1 / span 2']} gc={['1', null, '2']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' gr={['1', null, '1 / span 2']} gc={['3', null, '3']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=3' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' gr={['2', null, '3 / span 2']} gc={['1', null, '2']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=4' alt='' width='960' height='640' />
			</Frame>
			<Frame tag='figure' gr={['2', null, '3 / span 2']} gc={['3', null, '3']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?r=5' alt='' width='960' height='640' />
			</Frame>
		</Grid>
	</Container>
</DemoLayout>