Feature009

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

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

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