Section

Section002

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

↓

コード

index.astro

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

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

<DemoLayout title='Section002'>
	<Container isWrapper='l' py='50' hasGutter>
		<Grid gtc={['auto', null, '1fr minmax(20rem, 1fr)']} gtr={['1fr', null, '1fr auto auto 1fr']} g='40 60'>
			<Stack gr={[' 1', null, '2']} g='40'>
				<h2 class='u-trim'>暮らしを、もっと豊かに</h2>
				<p class='u-trim'>
					私の役割は複雑なテクノロジーを誰もが直感的に、そして快適に使えるようにデザインすることです。
					ユーザーインタビューやテストを繰り返し、徹底的に「ユーザーの声」に耳を傾けながら、最高の体験を追求しています。
				</p>
			</Stack>
			<Columns cols='2' gr={['2', null, '1 / -1']} gc={['1', null, '2']} g='20' min-h='min(70svw, 30rem)'>
				<Frame tag='figure' gr='1 / -1'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' width='960' height='640' />
				</Frame>
				<Frame tag='figure' gr='1 / -1'>
					<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' width='960' height='640' />
				</Frame>
			</Columns>
			<Box gr='3'>
				<Flex ai='center' g='15'>
					<Button href='#' min-w={['100%', null, '150px']} p='15' bdrs='10'>View More</Button>
				</Flex>
			</Box>
		</Grid>
	</Container>
</DemoLayout>

style.css