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" setGutter>
		<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 as="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--trimChildren">
									<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 as="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--trimChildren">
									<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 as="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--trimChildren">
									<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>