Feature006

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

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

<DemoLayout title="Feature006">
  <Container isWrapper="m" bgc="base" py="50" set="gutter">
    <Heading level="2" ta="center">ここに特徴が並びます</Heading>
    <TileGrid cols={['1', null, '2']} rows={['1', null, '3']} my-s="40" g={['30', '40']}>
      <Grid as="a" isBoxLink href="#" gr="1 / span 3" gtr="1fr auto" bxsh="20" set="hov transition" hov="bxsh">
        <Frame as="figure" pos="relative">
          <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" set="transition" hov="to:zoom" />
          <Layer set="transition" hov="to: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>
        <Stack g="30" p="30">
          <Text class="u--trim" fz="l" fw="bold">衣類をいたわる</Text>
          <Text class="u--trim" fz="m" o="-10">繊維の奥の汚れを落とし、衣類の傷みを抑えながら、ふんわりと優しく洗い上げます。</Text>
        </Stack>
      </Grid>
      <Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="hov transition" hov="bxsh">
        <Frame as="figure" pos="relative">
          <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" set="transition" hov="to:zoom" />
          <Layer set="transition" hov="to:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
            <Center h="100%" c="white">
              <Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
            </Center>
          </Layer>
        </Frame>
        <Stack g="30" p="30">
          <Text class="u--trim" fz="m" fw="bold">空気をデザインする</Text>
          <Text class="u--trim" fz="s" o="-10">快適な室温はもちろん、空気清浄機能でウイルスや花粉の活動を抑制します。</Text>
        </Stack>
      </Grid>
      <Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="hov transition" hov="bxsh">
        <Frame as="figure" pos="relative">
          <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" set="transition" hov="to:zoom" />
          <Layer set="transition" hov="to:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
            <Center h="100%" c="white">
              <Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
            </Center>
          </Layer>
        </Frame>
        <Stack g="30" p="30">
          <Text class="u--trim" fz="m" fw="bold">毎日ごちそうを</Text>
          <Text class="u--trim" fz="s" o="-10">過熱水蒸気の力で、本格的なオーブン料理が誰でも簡単においしく作れます。</Text>
        </Stack>
      </Grid>
      <Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="hov transition" hov="bxsh">
        <Frame as="figure" pos="relative">
          <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" set="transition" hov="to:zoom" />
          <Layer set="transition" hov="to:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
            <Center h="100%" c="white">
              <Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
            </Center>
          </Layer>
        </Frame>
        <Stack g="30" p="30">
          <Text class="u--trim" fz="m" fw="bold">深呼吸したくなる空間へ</Text>
          <Text class="u--trim" fz="s" o="-10">高性能フィルターが微細な粒子を99%捕集。静かな運転音で寝室にも最適。</Text>
        </Stack>
      </Grid>
    </TileGrid>
  </Container>
</DemoLayout>

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