Section
Section012

A section template. Below the "md" breakpoint, it displays in a single column with items stacked vertically.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Section012">
  <Grid gtr="auto" gtc={['auto', null, 'auto 1fr']} pos="relative">
    <Layer>
      <Frame h="100%">
        <Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
        <Layer bgc="black:30%" />
      </Frame>
    </Layer>
    <Container isWrapper="m" gr="1" gc="1" hasGutter pos="relative" z="1">
      <Grid gtc={['auto', null, 'auto 1fr']} c="white" g="50" py="50">
        <Heading level="2" class="u--trim" fz="3xl" fw="bold" hl="l">Healing Moments Born<br />from Natural Materials</Heading>
        <Stack class="u--trimAll" g="40">
          <p>
            Close your eyes, and you'll feel as if you're bathed in the dappled sunlight of a forest, with an overwhelming sense of immersion. This
            speaker was created to reproduce recorded natural sounds in a three-dimensional and incredibly realistic way.
          </p>
          <p>
            The enclosure is made from a porous natural material created by hardening diatomaceous earth, known for its moisture regulation and
            deodorizing properties, using a special technique. This diatomaceous earth absorbs excess sound reverberation, achieving remarkably clear,
            smooth, and natural acoustic characteristics. The dedicated app features numerous high-quality binaural recordings captured throughout
            Japan, from the forests of Yakushima to the waves of Okinawa.
          </p>
          <p>
            The slightly different sounds flowing from the left and right speakers form a three-dimensional sound image in your mind, guiding you into
            deep relaxation. Distinct from speakers made for music, this is a device for bringing "soundscapes" into your daily life. Tune your mind
            and body with the sounds of nature.
          </p>
        </Stack>
      </Grid>
    </Container>
  </Grid>
</DemoLayout>
style.css