General03

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

import { Container, Frame, Media, Stack, Columns } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="General03">
  <Container bgc="base">
    <Columns cols={['1', null, '2']} g="5">
      <Stack g="40" gr={[null, null, '1']} bgc="base-2" ai="center" jc="center" p="60 50">
        <h2>感動をその手に</h2>
        <Stack g="30">
          <p>
            あなたが住む街には、まだ知らない素敵な場所や物語が隠されています。
            私たちのサービスは、地元の人だけが知る隠れ家カフェや、週末に楽しめる小さなイベントなど、 地域に根差した情報を丁寧にお届けします。
          </p>
          <p>いつもの帰り道が、新しい発見に満ちた冒険の道に変わる。そんな体験を、私たちと一緒に始めましょう。</p>
        </Stack>
        <Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
      </Stack>
      <Columns cols="2" gc={[null, null, '2']} g="5">
        <Frame as="figure">
          <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure">
          <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure">
          <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure">
          <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
        </Frame>
      </Columns>
    </Columns>
  </Container>
</DemoLayout>