General06

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

import { Group, Stack, Container, Frame, Grid, Media, Layer, Heading } from 'lism-css/astro';
---

<DemoLayout title="General06">
  <Group as="section" pos="relative">
    <Layer>
      <Frame h="100%">
        <Media src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        <Layer bgc="black:40%" style={{ backdropFilter: 'blur(8px)' }} />
      </Frame>
    </Layer>
    <Container isWrapper="m" hasGutter pos="relative" z="1">
      <Grid gtc={['auto', null, 'auto 1fr']} c="white" g="50" py="70">
        <Heading level="2" class="u--trim" fz="3xl" fw="bold" hl="l">行く道すべて、<br />旅になる</Heading>
        <Stack class="u--trimAll" g="40">
          <p>キャンピングカーなら、宿の予約も時刻表も気にせずに旅ができます。気になる景色を見つけたら車を止め、そのまま一晩過ごすのも自由です。</p>
          <p>
            私たちは、はじめての方でも安心して運転できるキャンピングカーを、全国12の拠点で貸し出しています。寝具やキッチン用品は車内にそろっているので、着替えだけ持って出発できます。
          </p>
          <p>おすすめのルートやキャンプ場の情報も、スタッフが一緒に考えます。いつもの休日を、少しだけ遠くまで走らせてみませんか。</p>
        </Stack>
      </Grid>
    </Container>
  </Group>
</DemoLayout>