Section

Section003-2

セクション用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。

↓

コード

index.astro

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Frame, Columns, Media, Stack } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.astro';
import './_style.css';
---

<DemoLayout title='Section003-2'>
	<Container bgc='base'>
		<Columns cols={['1', null, '2']} g='5'>
			<Stack g='40' gr={[null, null, '1']} gc={[null, null, '2']} bgc='base-2' ai='center' jc='center' p='60 50'>
				<h2>感動をその手に</h2>
				<Stack g='30'>
					<p>
						あなたが住む街には、まだ知らない素敵な場所や物語が隠されています。
						私たちのサービスは、地元の人だけが知る隠れ家カフェや、週末に楽しめる小さなイベントなど、
						地域に根差した情報を丁寧にお届けします。
					</p>
					<p>いつもの帰り道が、新しい発見に満ちた冒険の道に変わる。そんな体験を、私たちと一緒に始めましょう。</p>
				</Stack>
				<Button href='#' min-w='250px' py='15' bdrs='10'>View More</Button>
			</Stack>
			<Columns cols='2' gc={[null, null, '1']} g='5'>
				<Frame tag='figure'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' width='960' height='640' />
				</Frame>
				<Frame tag='figure'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' width='960' height='640' />
				</Frame>
				<Frame tag='figure'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=3' alt='' width='960' height='640' />
				</Frame>
				<Frame tag='figure'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=4' alt='' width='960' height='640' />
				</Frame>
			</Columns>
		</Columns>
	</Container>
</DemoLayout>

style.css