Section013

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

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

<DemoLayout title='Section013'>
	<Container isWrapper='l' bgc='gray' py='50' hasGutter>
		<Columns cols={[1, null, 3]} g={['30', null, '40']} c='white'>
			<Stack g='30'>
				<HTML.h lv='2' class='u-trim' fz='5xl' ff='accent' fs='italic' fw='black' lts='l'>Feature</HTML.h>
				<p>
					私たちのサービスは、ユーザーの皆様に最高の体験を提供することを目指しています。
					最新の技術を駆使し、使いやすさと安全性を両立させたプラットフォームを構築しました。
				</p>
			</Stack>
			<Frame tag='figure' ar={['4/3', null, '3/4']}>
				<Media src='https://cdn.lism-css.com/img/random-2510?category=v' alt='' />
			</Frame>
			<Stack aslf='end' g='30'>
				<p>
					最新の技術を駆使し、使いやすさと安全性を両立させたプラットフォームを構築しました。
					多様なニーズに対応するため、柔軟なカスタマイズオプションも用意しています。
				</p>
				<Flex>
					<Button href='#' variant='outline' c='white' w='stretch' min-w='8rem' py='15' bdrs='10'>View Detail</Button>
				</Flex>
			</Stack>
		</Columns>
	</Container>
</DemoLayout>