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']}>みんなでつくり直した公園</Heading>
        <Flow>
          <p>
            開園から40年が経ち、遊具も植栽も古くなっていた駅前の公園。これからの使い方をみんなで考えようと、地域の人たちとの話し合いから再整備が始まりました。
          </p>
          <p>
            芝生の広場を囲むように、ゆるやかにカーブする散歩道をつくりました。木陰のベンチや子どもたちの遊び場も、住民の声をもとに配置を決めています。
          </p>
          <p>
            植栽の手入れには、地域の人たちも参加しています。子どもたちと一緒に苗を植え、花壇を育てる時間は、世代を超えて顔を合わせる大切な機会にもなっています。
          </p>
          <p>
            緑は、植えたその日に完成するものではありません。何年もかけて木が育つように、この公園もまた、そこに暮らす人と一緒に少しずつ育っていきます。
          </p>
        </Flow>
      </Stack>
    </Box>
  </Wrapper>
</DemoLayout>