Feature016

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

import { Container, Frame, Grid, Media, Stack, HTML, Flex } from 'lism-css/astro';
import { Button } from '@lism-css/ui/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>