Section006

---
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="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>