Section011

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

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

<DemoLayout title="Section011">
  <Container>
    <Stack>
      <Frame as="figure" ar="16/9" pos="relative" max-h="32rem">
        <Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
        <Layer>
          <Container isWrapper="m" py="40" h="100%" hasGutter>
            <Stack jc="flex-end" g="30" min-h="100%" c="white">
              <Heading level="2" class="u--trim" fz="min(5vw, 2rem)" fw="bold">まだ見ぬ世界をあなたに</Heading>
              <Text class="u--trim" fz="min(2.5vw, 1rem)">A world you've never seen before</Text>
            </Stack>
          </Container>
        </Layer>
      </Frame>
      <Container isWrapper="m" py="40" hasGutter>
        <Stack g="30">
          <Heading level="3" fz="xl" fw="bold">未知の世界を体感</Heading>
          <Text>
            自然由来の環境負荷を抑えた製法で、一つひとつ丁寧に手作りしています。
            大地の恵みを、あなたの毎日へ。私たちの製品は、自然の力を最大限に活かし、持続可能な未来を目指しています。
            季節ごとに変わる風景とともに、心地よい生活をお届けします。
            四季折々の美しさを感じながら、豊かな時間を過ごしていただけることを願っています。
          </Text>
          <Text>
            私たちの製品は、自然の恵みを活かし、心地よい生活を提供します。
            四季の移ろいを感じながら、毎日を大切に過ごしていただけることを願っています。
            環境に配慮した製法で作られた製品は、持続可能な未来を目指す私たちの使命の一環です。 自然の美しさと調和した生活をお楽しみください。
          </Text>
        </Stack>
      </Container>
    </Stack>
  </Container>
</DemoLayout>