CTA003

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

import { Stack, Container, Frame, Grid, Media, HTML, Layer, Icon } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.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>