Feature004

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

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

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

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