Section013

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

import { Container, Columns, HTML, Frame, Flex, Media, Stack } from 'lism-css/astro';
import { Button } from '@lism-css/ui/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>