Feature002

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

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

<DemoLayout title="Feature002">
  <Container isWrapper="l" py="50" hasGutter>
    <Stack g="40">
      <Grid gtc={['1fr', null, 'auto 1fr']} g="inherit">
        <Stack class="u--trimAll" g="20">
          <h2>私たちの取り組み</h2>
          <Text fz="l" ff="accent" o="pp">Our efforts</Text>
        </Stack>
        <Flex class="u--trimAll" jc={['s', null, 'end']}>
          <Text max-w="32rem" fz="s" o="p">
            地域の未来を見据え、持続可能な社会の実現に向けた取り組みを進めています。
            環境保護や地域活性化を通じて、次世代に誇れる街づくりを目指します。
          </Text>
        </Flex>
      </Grid>
      <Columns cols={[2, null, 4]} g={['30', '40']}>
        <Grid as="a" isBoxLink href="#" g="20" ai="start" set="var:hov">
          <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" hasTransition hov="in:zoom" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Flex ai="center" jc="flex-start" g="15" fz="m" lh="s">
            <Inline>地域の未来を共に描く</Inline>
            <Icon icon="arrow-right" mx-s="auto" hasTransition hov="in:solid" />
          </Flex>
        </Grid>
        <Grid as="a" isBoxLink href="#" g="20" ai="start" set="var:hov">
          <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" hasTransition hov="in:zoom" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Flex ai="center" jc="flex-start" g="15" fz="m" lh="s">
            <Inline>誰もが集える憩いの場</Inline>
            <Icon icon="arrow-right" mx-s="auto" hasTransition hov="in:solid" />
          </Flex>
        </Grid>
        <Grid as="a" isBoxLink href="#" g="20" ai="start" set="var:hov">
          <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" hasTransition hov="in:zoom" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Flex ai="center" jc="flex-start" g="15" fz="m" lh="s">
            <Inline>地元の恵みを食卓へ</Inline>
            <Icon icon="arrow-right" mx-s="auto" hasTransition hov="in:solid" />
          </Flex>
        </Grid>
        <Grid as="a" isBoxLink href="#" g="20" ai="start" set="var:hov">
          <Frame as="figure" ar="1/1" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" hasTransition hov="in:zoom" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Flex ai="center" jc="flex-start" g="15" fz="m" lh="s">
            <Inline>緑豊かな景観づくり</Inline>
            <Icon icon="arrow-right" mx-s="auto" hasTransition hov="in:solid" />
          </Flex>
        </Grid>
      </Columns>
    </Stack>
  </Container>
</DemoLayout>

<style>
  @media (any-hover: hover) {
    .-hov\:in\:zoom {
      scale: var(--_isHov, 1.1);
    }
    .-hov\:in\:solid {
      opacity: var(--_notHov, var(--o--ppp));
    }
  }
</style>