Section010

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

import { Box, Stack, Container, Frame, Layer, Media, HTML } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title='Section010'>
	<Container isWrapper='m' py='50' hasGutter>
		<Stack g='30'>
			<Frame tag='figure' tag='figure' ar='16/9' pos='rel'>
				<Media src='https://cdn.lism-css.com/img/random-2510' alt='' width='960' height='640' />
				<Layer p='40 0'>
					<Stack jc='center' ai='flex-s' min-h='100%' g='20'>
						<Box bgc='white' p='20 30'>
							<HTML.h lv='2' class='u-trim' fz='min(4.5vw, 1.75rem)' fw='bold' ff='accent' lts='l'>四季の美しさを感じる</HTML.h>
						</Box>
					</Stack>
					<Box tag='figcaption' p='20' pos='abs' b='0' r='0'>
						<HTML.span class='u-trim' fz='s' c='white' ff='accent' lts='l'>Feel the beauty of each season</HTML.span>
					</Box>
				</Layer>
			</Frame>
			<HTML.p>
				自然由来の環境負荷を抑えた製法で、一つひとつ丁寧に手作りしています。
				大地の恵みを、あなたの毎日へ。私たちの製品は、自然の力を最大限に活かし、持続可能な未来を目指しています。
				季節ごとに変わる風景とともに、心地よい生活をお届けします。
				四季折々の美しさを感じながら、豊かな時間を過ごしていただけることを願っています。
			</HTML.p>
		</Stack>
	</Container>
</DemoLayout>