General04

---
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="General04">
  <Container bgc="base">
    <Columns cols={['1', null, '2']} g="5">
      <Stack g="40" ai="center" jc="center" py="60" px={['30', '50']}>
        <h2>未来に触れる3日間</h2>
        <Stack g="30">
          <p>
            最新のロボティクスやAI、VRの展示に、第一線で活躍する研究者によるセッション。テクノロジーと人のこれからを、見て、触れて、体感できるカンファレンスです。
          </p>
          <p>3日間で40以上のセッションと100社を超える出展を予定しています。事前登録で、どなたでも無料でご参加いただけます。</p>
        </Stack>
        <Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
      </Stack>
      <Columns cols="2" g="5">
        <Frame as="figure">
          <Media src="https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure">
          <Media src="https://images.unsplash.com/photo-1786542715448-f47cf2dbcca0?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure">
          <Media src="https://images.unsplash.com/photo-1554474051-0256b98c36f8?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure">
          <Media src="https://images.unsplash.com/photo-1550305080-4e029753abcf?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
      </Columns>
    </Columns>
  </Container>
</DemoLayout>