Section002

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

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

<DemoLayout title="Section002">
  <Container isWrapper="l" py="50" hasGutter>
    <Grid gtc={['auto', null, '1fr minmax(20rem, 1fr)']} gtr={['1fr', null, '1fr auto auto 1fr']} g="40 60">
      <Stack gr={[' 1', null, '2']} g="40">
        <h2 class="u--trim">暮らしを、もっと豊かに</h2>
        <p class="u--trim">
          私の役割は複雑なテクノロジーを誰もが直感的に、そして快適に使えるようにデザインすることです。
          ユーザーインタビューやテストを繰り返し、徹底的に「ユーザーの声」に耳を傾けながら、最高の体験を追求しています。
        </p>
      </Stack>
      <Columns cols="2" gr={['2', null, '1 / -1']} gc={['1', null, '2']} g="20" min-h="min(70svw, 30rem)">
        <Frame as="figure" gr="1 / -1">
          <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure" gr="1 / -1">
          <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
        </Frame>
      </Columns>
      <Box gr="3">
        <Flex ai="center" g="15">
          <Button href="#" min-w={['100%', null, '150px']} p="15" bdrs="10">View More</Button>
        </Flex>
      </Box>
    </Grid>
  </Container>
</DemoLayout>