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">Every Road<br />Becomes a Journey</Heading>
        <Stack class="u--trimAll" g="40">
          <p>
            With a camper van, you can travel without worrying about hotel bookings or timetables. When you find a view you love, pull over and stay
            the night if you like.
          </p>
          <p>
            We rent camper vans that are easy to drive even for first-timers, from 12 locations nationwide. Bedding and kitchenware are already on
            board, so all you need to pack is a change of clothes.
          </p>
          <p>Our staff are happy to help you plan routes and find campsites. Why not take your next day off a little farther than usual?</p>
        </Stack>
      </Grid>
    </Container>
  </Group>
</DemoLayout>