General01

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

import { Wrapper, Flex, Frame, Media, Stack, Text } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="General01">
  <Wrapper contentSize="s" py="50" bgc="base" hasGutter>
    <Stack ai="center" g="40">
      <h2 class="u--trim">A Town Where People and Nature Grow Together</h2>
      <Frame as="figure" class="set--bdrsInner" as="figure" ar="16/9" pos="relative" bdrs="20" bxsh="20" bgc="base" p="10">
        <Media
          class="-bdrs:inner"
          src="https://images.unsplash.com/photo-1578637387939-43c525550085?auto=format&fit=max&w=1920&q=80"
          alt=""
          width="960"
          height="640"
        />
      </Frame>
      <Text class="u--trim" fz="m">
        While passing on our rich natural environment to the next generation, we are promoting the creation of spaces where urban life and nature
        coexist in harmony. We aim to contribute to the realization of a sustainable society. Together, we are building a sustainable future.
      </Text>
      <Flex g="30" ai="center" jc="center">
        <Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
      </Flex>
    </Stack>
  </Wrapper>
</DemoLayout>