General10

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

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

<DemoLayout title="General10">
  <Container isWrapper="m" py="50" hasGutter>
    <Stack g="30">
      <Frame as="figure" ar={['1/1', '3/2']} pos="relative">
        <Media src="https://cdn.lism-css.com/img/BObC4emORTNt.webp" alt="" width="960" height="640" />
        <Layer>
          <Stack jc="start" ai="flex-start" min-h="100%" g="20">
            <Box bgc="base" py="20" px="25" mt={['30', '50']}>
              <Heading level="2" fz={['l', 'xl', '3xl']} fw="normal" ff="accent" lts="xl" lh="s">Watch the Sky Change</Heading>
            </Box>
          </Stack>
        </Layer>
      </Frame>
      <Text>
        As the sun begins to set, the sea and sky change color moment by moment, from orange to purple, and finally to a deep indigo. On our seaside
        terrace, we set aside special seats just for the evening hours. With a warm drink in hand, listen to the sound of the waves and wait for the
        sun to slowly sink below the horizon. Perhaps doing nothing at all is the greatest luxury.
      </Text>
    </Stack>
  </Container>
</DemoLayout>