Section010

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

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

<DemoLayout title="Section010">
  <Container isWrapper="m" py="50" hasGutter>
    <Stack g="30">
      <Frame as="figure" ar="16/9" pos="relative">
        <Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
        <Layer p="40 0">
          <Stack jc="center" ai="flex-start" min-h="100%" g="20">
            <Box bgc="white" p="20 30">
              <Heading level="2" class="u--trim" fz="min(4.5vw, 1.75rem)" fw="bold" ff="accent" lts="l">四季の美しさを感じる</Heading>
            </Box>
          </Stack>
          <Box as="figcaption" p="20" pos="absolute" b="0" r="0">
            <Inline class="u--trim" fz="s" c="white" ff="accent" lts="l">Feel the beauty of each season</Inline>
          </Box>
        </Layer>
      </Frame>
      <Text>
        自然由来の環境負荷を抑えた製法で、一つひとつ丁寧に手作りしています。
        大地の恵みを、あなたの毎日へ。私たちの製品は、自然の力を最大限に活かし、持続可能な未来を目指しています。
        季節ごとに変わる風景とともに、心地よい生活をお届けします。 四季折々の美しさを感じながら、豊かな時間を過ごしていただけることを願っています。
      </Text>
    </Stack>
  </Container>
</DemoLayout>