CTA003

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

import { Stack, Container, Frame, Grid, Media, HTML, Layer, Icon } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="CTA003">
	<Stack pos="rel">
		<Frame isLayer>
			<Media isLayer src="https://cdn.lism-css.com/img/random-2510" alt="" width="960" height="640" />
			<Layer blur="4px" grayscale="100%" bgc="black:50%" />
		</Frame>
		<Container isWrapper="l" hasGutter py="50" z="1">
			<Grid gtc={['auto', null, 'auto 1fr']} ai="center" g="40 60" w="stretch">
				<Stack ai="fs" g="40" py={[0, null, '50']}>
					<Stack g="40">
						<HTML.p class="u-trim" fz="5xl" fw="thin" lts="l" c="white">Contact</HTML.p>
						<HTML.p class="u-trim" fz="m" c="white">はじめての方もお気軽にご相談ください<br />弊社スタッフが迅速に対応いたします</HTML.p>
					</Stack>
					<Stack g="30" w="stretch">
						<Button
							href="#"
							g="15"
							variant="outline"
							w="stretch"
							c="white"
							bdrs="10"
							py="15"
							fw="bold"
							setTransition
							hov={{ bgc: 'white', c: 'black' }}
						>
							<Icon icon="chat" fz="2em" />
							<span>チャットで相談</span>
						</Button>
						<Button
							href="#"
							g="15"
							variant="outline"
							w="stretch"
							c="white"
							bdrs="10"
							py="15"
							fw="bold"
							setTransition
							hov={{ bgc: 'white', c: 'black' }}
						>
							<Icon icon="user" fz="2em" />
							<span>メールでお問い合わせ</span>
						</Button>
					</Stack>
				</Stack>
				<Frame tag="figure" h="100%">
					<Media src="https://cdn.lism-css.com/img/random-2510" alt="" width="960" height="640" bdrs="10" />
				</Frame>
			</Grid>
		</Container>
	</Stack>
</DemoLayout>