General02

---
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/Button';
---

<DemoLayout title="General02">
  <Container isWrapper="l" py="50" hasGutter>
    <Grid gtc={['auto', null, '1fr minmax(20rem, 1fr)']} gtr={['1fr', null, '1fr auto auto 1fr']} rg="40" cg="60">
      <Stack gr={[' 1', null, '2']} g="40">
        <h2 class="u--trim">一針ずつ、手で縫う</h2>
        <p class="u--trim">
          私たちの革小物は、裁断から縫製、コバの仕上げまで、すべての工程を工房の職人が手作業で行っています。2本の針で糸を交差させて縫うサドルステッチは、一か所の糸が切れてもほどけにくく、毎日の使用に耐える丈夫な仕立てです。
        </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://images.pexels.com/photos/11676700/pexels-photo-11676700.jpeg?auto=compress&cs=tinysrgb&w=1000"
            alt=""
            width="960"
            height="640"
          />
        </Frame>
        <Frame as="figure" gr="1 / -1">
          <Media
            src="https://images.unsplash.com/photo-1632107727999-8c23443472cb?auto=format&fit=max&w=1920&q=80"
            alt=""
            width="960"
            height="640"
            style={{ objectPosition: 'bottom' }}
          />
        </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>