Section
Section004

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, Frame, TileGrid, Media, Stack } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
import './_style.css';
---

<DemoLayout title="Section004">
  <Container bgc="base">
    <TileGrid cols={['2', null, '4']} rows={['4', null, '2']} g="5">
      <Stack
        gr={['2 / span 2', null, '1 / -1']}
        gc={['1 / -1', null, '2 / span 2']}
        g="40"
        bgc="base-2"
        ai="center"
        jc="center"
        p={['60 50', null, '60']}
      >
        <h2>Capturing Memories</h2>
        <Stack g="30">
          <p>
            Even when you want to start something new, it can be hard to know where to begin. In those moments, leave it to us. We analyze your
            interests and open doors to new hobbies and learning opportunities.
          </p>
          <p>
            From online courses to local workshops, you'll find opportunities to expand your possibilities right here. Every day brings a chance to
            meet a more accomplished version of yourself.
          </p>
        </Stack>
        <Button href="#" min-w="250px" py="15" bdrs="10">View More</Button>
      </Stack>
      <Frame as="figure">
        <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure">
        <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure">
        <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure">
        <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
      </Frame>
    </TileGrid>
  </Container>
</DemoLayout>
style.css