Feature016

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

import { Container, Frame, Grid, Media, Stack, Flex, Text, Heading } 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">
          <Heading level="2" class="u--trim" fz="3xl" fw="bold" lh="l" c="gray">ここにしかない<br />特別な体験のための<br />魅力的なスポット</Heading>
          <Text class="u--trim" fz="m" o="pp">Feature special spots</Text>
        </Stack>
        <Text>
          あなたの旅をワンランク上の特別な体験へ。
          私たちは世界中の高級ホテルや隠れ家リゾート、特別な移動手段の手配に特化したプレミアム旅行サービスです。
          移動から宿泊、食事まで、最高品質のホスピタリティをご用意。喧騒から離れ心から満たされる、あなただけの贅沢な時間をお約束します。
        </Text>
        <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 as="figure" ar="4/3" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
          </Frame>
          <Text class="u--trim" fz="s" c="gray">幻想的で美しい夕景</Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="20">
          <Frame as="figure" ar="4/3" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
          </Frame>
          <Text class="u--trim" fz="s" c="gray">雄大な空を眺める絶景スポット</Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="20">
          <Frame as="figure" ar="4/3" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
          </Frame>
          <Text class="u--trim" fz="s" c="gray">心が落ち着く青の世界</Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="20">
          <Frame as="figure" ar="4/3" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
          </Frame>
          <Text class="u--trim" fz="s" c="gray">風を感じる穏やかな時間</Text>
        </Grid>
      </Grid>
    </Grid>
  </Container>
</DemoLayout>