Feature004

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

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

<DemoLayout title='Feature004'>
	<Container isWrapper='l' py='50' hasGutter>
		<Stack g='50'>
			<HTML.h class='u-trim' lv='2' fz='2xl' ta='center'>未知なる体験</HTML.h>
			<Columns cols={[1, null, 3]} g='30'>
				<Stack g='20'>
					<Frame tag='a' isLinkbox href='#' pos='rel' ar={['4/3', null, '3/4']} bdrs='10' bxsh='30' td='none' setHov>
						<Media
							isLayer
							src='https://cdn.lism-css.com/img/random-2510?category=v&r=1'
							alt=''
							width='960'
							height='640'
							setTransition
							hov='to:zoom'
						/>
						<Layer bgc='rgb(0 0 0 / 20%)' />
						<Stack pos='rel' h='100%' jc='flex-e' c='white' p='30' g='20' my-s='auto'>
							<Grid gtc='1fr auto' ai='end' g='30'>
								<Stack g='20' class='u-trimItems'>
									<HTML.p fz='l' fw='bold' lh='s'>革新的な技術力</HTML.p>
									<HTML.p fz='s' lh='s' o='-10'>Advanced Technology</HTML.p>
								</Stack>
								<Flex ai='center' jc='center' bd bdc='white' p='15' bdrs='99' c='white' setTransition hov='to:reverse'>
									<Icon icon='arrow-right' fz='s' />
								</Flex>
							</Grid>
						</Stack>
					</Frame>
					<HTML.p pb='20'>最新のAIとロボット技術を駆使し、高精度なものづくりで未来の産業を支えます。</HTML.p>
				</Stack>
				<Stack g='20'>
					<Frame tag='a' isLinkbox href='#' pos='rel' ar={['4/3', null, '3/4']} bdrs='10' bxsh='30' td='none' setHov>
						<Media
							isLayer
							src='https://cdn.lism-css.com/img/random-2510?category=v&r=2'
							alt=''
							width='960'
							height='640'
							setTransition
							hov='to:zoom'
						/>
						<Layer bgc='rgb(0 0 0 / 20%)' />
						<Stack pos='rel' h='100%' jc='flex-e' c='white' p='30' g='20' my-s='auto'>
							<Grid gtc='1fr auto' ai='end' g='30'>
								<Stack g='20' class='u-trimItems'>
									<HTML.p fz='l' fw='bold' lh='s'>徹底した品質管理</HTML.p>
									<HTML.p fz='s' lh='s' o='-10'>Quality First</HTML.p>
								</Stack>
								<Flex ai='center' jc='center' bd bdc='white' p='15' bdrs='99' c='white' setTransition hov='to:reverse'>
									<Icon icon='arrow-right' fz='s' />
								</Flex>
							</Grid>
						</Stack>
					</Frame>
					<HTML.p pb='20'>ミクロン単位の精度を追求し、すべての製品においてお客様に安心と信頼をお届けします。</HTML.p>
				</Stack>
				<Stack g='20'>
					<Frame tag='a' isLinkbox href='#' pos='rel' ar={['4/3', null, '3/4']} bdrs='10' bxsh='30' td='none' setHov>
						<Media
							isLayer
							src='https://cdn.lism-css.com/img/random-2510?category=v&r=3'
							alt=''
							width='960'
							height='640'
							setTransition
							hov='to:zoom'
						/>
						<Layer bgc='rgb(0 0 0 / 20%)' />
						<Stack pos='rel' h='100%' jc='flex-e' c='white' p='30' g='20' my-s='auto'>
							<Grid gtc='1fr auto' ai='end' g='30'>
								<Stack g='20' class='u-trimItems'>
									<HTML.p fz='l' fw='bold' lh='s'>グローバル供給体制</HTML.p>
									<HTML.p fz='s' lh='s' o='-10'>Global Network</HTML.p>
								</Stack>
								<Flex ai='center' jc='center' bd bdc='white' p='15' bdrs='99' c='white' setTransition hov='to:reverse'>
									<Icon icon='arrow-right' fz='s' />
								</Flex>
							</Grid>
						</Stack>
					</Frame>
					<HTML.p pb='20'>世界中の拠点を結び、お客様のニーズに迅速かつ柔軟に対応するグローバル供給網です。</HTML.p>
				</Stack>
			</Columns>
		</Stack>
	</Container>
</DemoLayout>

<style>
	@media (any-hover: hover) {
		.-hov\:to\:zoom {
			scale: var(--_isHov, 1.1);
		}
		.-hov\:to\:reverse {
			background-color: var(--_isHov, var(--white));
			color: var(--_isHov, var(--black));
		}
	}
</style>