Section
Section016

A section template. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Section016">
  <Container py="50">
    <Container isWrapper="m" hasGutter>
      <Grid gtc={['auto', null, 'auto 1fr']} g="50 60">
        <Stack g="30" min-w="16rem" ff="accent" fs="i" c="gray">
          <Heading level="2" class="u--trim" fz="5xl" fw="bold">Relaxing</Heading>
          <Text class="u--trim" fz="l">Crisp, clean air that makes you want to take a deep breath</Text>
        </Stack>
        <Stack class="u--trimAll" g="40">
          <p>
            Bring the refreshing, crisp air of a highland forest right into your room. The high-performance filter thoroughly removes invisible fine
            particles and household odors, keeping your space clean and pure. With a whisper-quiet design you'll forget is even running, it's perfect
            for bedrooms and studies. A quiet partner that brings gentle comfort and healthy deep breaths into your daily life.
          </p>
          <p>
            When you want to focus on reading or work, or on a night when you want to fully relax. It creates the most suitable lighting environment
            for your moment. Light adds deeper dimension and color to your everyday life.
          </p>
        </Stack>
      </Grid>
    </Container>
    <Grid gtc={['repeat(2, 1fr)', null, 'repeat(4, 1fr)']} g="20" my-s="50">
      <Frame as="figure" ar="4/3" gr={['1', null, '1']} gc={['1', null, '1']}>
        <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" ar="4/3" gr={['1', null, '1']} gc={['2', null, '2']}>
        <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" ar="4/3" gr={['2', null, '1']} gc={['1', null, '3']}>
        <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" ar="4/3" gr={['2', null, '1']} gc={['2', null, '4']}>
        <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
      </Frame>
    </Grid>
  </Container>
</DemoLayout>
style.css