Section
Section011

A section template.
↓
Code
en.astro
---
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">A World You've Never Seen Before</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">Experience the Unknown</Heading>
          <Text>
            Handcrafted one by one using eco-friendly, naturally derived methods. Bringing nature's bounty to your everyday life. Our products harness
            the full power of nature, aiming for a sustainable future. Delivering a comfortable life along with the ever-changing scenery of each
            season. We hope you can enjoy precious moments while appreciating the beauty of the four seasons.
          </Text>
          <Text>
            Our products harness nature's blessings to deliver a comfortable life. We hope you'll cherish each day while feeling the passage of the
            seasons. Products made with environmentally conscious methods are part of our mission to pursue a sustainable future. Enjoy a life in
            harmony with the beauty of nature.
          </Text>
        </Stack>
      </Container>
    </Stack>
  </Container>
</DemoLayout>
style.css