Section
Section006

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 { Button } from '@lism-css/ui/astro/Button';

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

<DemoLayout title="Section006">
  <Container bgc="base">
    <Grid
      gtr={['repeat(2, 1fr)', null, 'repeat(4, auto)']}
      gtc={['1fr minmax(70vw, 20rem) 1fr', null, 'minmax(320px, 1fr) 0.5fr 0.5fr']}
      h={['auto', null, '100svh']}
    >
      <Stack gr="1 / -1" gc={['2 / span 1', null, '1 / span 1']} g="40" ai="center" w="stretch" bgc="black:35%" p="60 50" pos="relative" z="1">
        <Layer style={{ backdropFilter: 'blur(8px)' }} z="0" />
        <Stack g="40" c="white" ai="center" jc="center" h="100%" z="1">
          <h2 class="u--trim">The Perfect Weekend</h2>
          <Stack g="20">
            <p>
              Turn an ordinary weekend into an unforgettable special day. This is a service that lets you book unique, locally rooted experiences you
              won't find in any guidebook.
            </p>
            <p>Step away from the everyday and create lasting memories. Discover the hidden charm of your city.</p>
          </Stack>
          <Flex w="100%" jc="center">
            <Button layout="grid" variant="outline" href="#" gtc="1em 1fr 1em" jc="center" c="white" min-w={['100%', null, '200px']} p="15" bdrs="10">
              <Inline gc="2">View More</Inline>
            </Button>
          </Flex>
        </Stack>
      </Stack>
      <Frame as="figure" gr={['1 / span 2', null, '1 / -1']} gc={['2', null, '1']}>
        <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['1', null, '1 / span 2']} gc={['1', null, '2']}>
        <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['1', null, '1 / span 2']} gc={['3', null, '3']}>
        <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['2', null, '3 / span 2']} gc={['1', null, '2']}>
        <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['2', null, '3 / span 2']} gc={['3', null, '3']}>
        <Media src="https://cdn.lism-css.com/random/img?r=5" alt="" width="960" height="640" />
      </Frame>
    </Grid>
  </Container>
</DemoLayout>
style.css