Feature016

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

import { Container, Frame, Grid, Media, Stack, HTML, Flex } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.astro';
import './_style.css';
---

<DemoLayout title='Feature016'>
	<Container isWrapper='l' bgc='base' py='50' hasGutter>
		<Grid gtc={['auto', null, 'minmax(20rem, 1fr) 2fr']} g={['40', '50']} bgc='base-2' p={['50 40', '50']} bdrs='20'>
			<Stack gr='1' g='40'>
				<Stack g='30'>
					<HTML.h lv='2' class='u-trim' fz='3xl' fw='bold' lh='l' c='gray'
						>ここにしかない<br />特別な体験のための<br />魅力的なスポット</HTML.h
					>
					<HTML.p class='u-trim' fz='m' o='-20'>Feature special spots</HTML.p>
				</Stack>
				<HTML.p>
					あなたの旅をワンランク上の特別な体験へ。
					私たちは世界中の高級ホテルや隠れ家リゾート、特別な移動手段の手配に特化したプレミアム旅行サービスです。
					移動から宿泊、食事まで、最高品質のホスピタリティをご用意。喧騒から離れ心から満たされる、あなただけの贅沢な時間をお約束します。
				</HTML.p>
				<Flex my-s='auto'>
					<Button href='#' jc='center' w='stretch' p='15' bdrs='10'>View More</Button>
				</Flex>
			</Stack>
			<Grid gtc='repeat(2, 1fr)' g='30' ac='start'>
				<Grid gtr='subgrid' gr='span 2' g='20'>
					<Frame tag='figure' tag='figure' ar='4/3' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' />
					</Frame>
					<HTML.p class='u-trim' fz='s' c='gray'>幻想的で美しい夕景</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='20'>
					<Frame tag='figure' tag='figure' ar='4/3' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' />
					</Frame>
					<HTML.p class='u-trim' fz='s' c='gray'>雄大な空を眺める絶景スポット</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='20'>
					<Frame tag='figure' tag='figure' ar='4/3' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=3' alt='' />
					</Frame>
					<HTML.p class='u-trim' fz='s' c='gray'>心が落ち着く青の世界</HTML.p>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='20'>
					<Frame tag='figure' tag='figure' ar='4/3' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?r=4' alt='' />
					</Frame>
					<HTML.p class='u-trim' fz='s' c='gray'>風を感じる穏やかな時間</HTML.p>
				</Grid>
			</Grid>
		</Grid>
	</Container>
</DemoLayout>