General03

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

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

<DemoLayout title="General03">
  <Container bgc="base" py="50">
    <Stack g={['40', null, '50']}>
      <Stack ai="center" g="30" ff="accent" hasGutter>
        <Heading level="2" fz="clamp(1.5rem, 4.5vw, 2rem)" fw="bold" ta="center">四季の美しさを感じる</Heading>
        <Text>春の芽吹き、夏の深い緑、秋の紅葉、そして冬の静けさ。</Text>
      </Stack>
      <TileGrid cols={['2', null, '4']} rows={['12', null, '6']} g={['20', '30']}>
        <Frame as="figure" gr={['1 / span 5', null, '1 / span 5']} gc={['1', null, '1']}>
          <Media src="https://images.unsplash.com/photo-1522383225653-ed111181a951?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure" gr={['2 / span 5', null, '2 / span 5']} gc={['2', null, '2']}>
          <Media src="https://images.unsplash.com/photo-1491977345698-16775008d007?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure" gr={['6 / span 5', null, '1 / span 5']} gc={['1', null, '3']}>
          <Media src="https://images.unsplash.com/photo-1501973801540-537f08ccae7b?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure" gr={['7 / span 5', null, '2 / span 5']} gc={['2', null, '4']}>
          <Media src="https://images.unsplash.com/photo-1465220183275-1faa863377e3?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
        </Frame>
      </TileGrid>
      <Flex jc="center" hasGutter>
        <Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
      </Flex>
    </Stack>
  </Container>
</DemoLayout>