General09

---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Wrapper, Stack, Frame, Media, Box, Flow, Layer, Center, Inline, Heading } from 'lism-css/astro';
---

<DemoLayout title="General09">
  <Wrapper isContainer py="50">
    <Frame ar={['4/3', '16/9', '21/9']} pos="relative" max-sz="full">
      <Media src="https://images.unsplash.com/photo-1584412182057-c4c8a22ff533?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
      <Layer bgc="rgb(0 0 0 / 20%)" style={{ backdropFilter: 'blur(8px)' }}>
        <Center h="100%" c="white">
          <Inline fz={['3xl', '4xl']} fw="normal" ff="accent" fs="italic" lts="l" px="20" py="10" mbs={['-20', '-30']}>Story</Inline>
        </Center>
      </Layer>
    </Frame>
    <Box hasGutter mbs={['-45', '-50', '-60']} pos="relative">
      <Stack bgc="base" p={['35', '40', '45']} g="40">
        <Heading level="2" class="u--trim" aslf="center" fz={['xl', '2xl']}>The Park We Rebuilt Together</Heading>
        <Flow>
          <p>
            Forty years after it opened, the park in front of the station had aging play equipment and worn-out plantings. Its redevelopment began
            with conversations with local residents about how everyone wanted to use it in the years ahead.
          </p>
          <p>
            We laid out gently curving paths around a grassy lawn. The shaded benches and the children's play area were also placed based on
            residents' feedback.
          </p>
          <p>
            Local residents also take part in caring for the plantings. Planting seedlings and tending flower beds with children has become a valuable
            chance for people of every generation to meet.
          </p>
          <p>
            Greenery is not finished on the day it is planted. Just as trees grow over many years, this park, too, grows little by little together
            with the people who live nearby.
          </p>
        </Flow>
      </Stack>
    </Box>
  </Wrapper>
</DemoLayout>