Feature009

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

import { Stack, Container, Frame, AutoColumns, Grid, Media, Text, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Feature009">
  <Container isWrapper="m" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">私たちの取り組み</Heading>
      <AutoColumns cols="300px" gtr="auto auto auto" g="40">
        <Grid gtr="subgrid" gr="span 2" g="30">
          <Frame as="figure" ar="og" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">自然と共に、生きる</Text>
            <Text class="u--trim" fz="s" o="p">
              人と自然が豊かに共存する社会を目指して。次世代に美しい地球を残すため、事業のあらゆる場面で環境への配慮を最優先に考えています。
            </Text>
          </Stack>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30">
          <Frame as="figure" ar="og" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">大地からの、贈り物</Text>
            <Text class="u--trim" fz="s" o="p">
              私たちの製品は、自然への敬意から生まれます。農薬を使わずに育てられたオーガニック素材や、持続可能な資源だけを厳選しています。
            </Text>
          </Stack>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30">
          <Frame as="figure" ar="og" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">自然に触れる、週末</Text>
            <Text class="u--trim" fz="s" o="p">
              都会の喧騒を離れ、土や緑に触れる時間を提供します。週末の農業体験や森歩きなど、五感で自然を感じるプログラムをご用意しています。
            </Text>
          </Stack>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30">
          <Frame as="figure" ar="og" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">同じ想いを、持つ仲間</Text>
            <Text class="u--trim" fz="s" o="p">
              このサービスは、同じ価値観を持つ人々のコミュニティです。作り手のストーリーや愛用者の声を発信し、想いの輪を広げています。
            </Text>
          </Stack>
        </Grid>
      </AutoColumns>
    </Stack>
  </Container>
</DemoLayout>