Feature014

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

import { Stack, Container, Frame, Grid, TileGrid, Media, Flex, Icon, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="Feature014">
  <Container isWrapper="l" bgc="base-2" py="50" hasGutter>
    <Stack g="50">
      <Stack ai="center" g="30">
        <Text class="u--trim" fz="4xl" fw="light" lts="l">Feature</Text>
        <Heading level="2" class="u--trim" fz="m" fw="normal" o="pp">鉱石の概要と効能</Heading>
      </Stack>
      <TileGrid cols={['1', null, '3']}>
        <Grid gtr="subgrid" gr="span 3" ji="c" g="30" p={['40', null, '0 40']}>
          <Frame as="figure" ar="1/1" w="10rem" bdrs="99">
            <Media src="https://cdn.lism-css.com/random/img?category=v&r=1" alt="" width="960" height="640" hasTransition hov="in:zoom" />
          </Frame>
          <Stack g="30">
            <Text class="u--trim" fz="l" fw="bold" ta="center">アクアマリン</Text>
            <Text class="u--trim" fz="s" o="pp">
              海のように穏やかで、清らかなエネルギーを持つ石。コミュニケーションを円滑にし、幸せな未来へと導きます。
            </Text>
          </Stack>
          <Flex w="stretch">
            <Button
              layout="grid"
              gtc="1em 1fr 1em"
              g="15"
              variant="outline"
              href="#"
              jc="center"
              w="stretch"
              p="20 30"
              bdrs="99"
              hasTransition
              hov="fill"
            >
              <Inline gc="2">View More</Inline>
              <Icon icon="arrow-right" gc="3" />
            </Button>
          </Flex>
        </Grid>
        <Grid gtr="subgrid" gr="span 3" ji="c" g="30" p={['40', null, '0 40']} bd bdw={['1px 0 0 0', null, '0 0 0 1px']} bdc="white">
          <Frame as="figure" ar="1/1" w="10rem" bdrs="99">
            <Media src="https://cdn.lism-css.com/random/img?category=v&r=2" alt="" width="960" height="640" hasTransition hov="in:zoom" />
          </Frame>
          <Stack g="30">
            <Text class="u--trim" fz="l" fw="bold" ta="center">ローズクォーツ</Text>
            <Text class="u--trim" fz="s" o="pp">
              愛と美を象徴する石。持ち主の内なる輝きを引き出し、優しさと思いやりの心を育むと伝えられています。
            </Text>
          </Stack>
          <Flex w="stretch">
            <Button
              layout="grid"
              gtc="1em 1fr 1em"
              g="15"
              variant="outline"
              href="#"
              jc="center"
              w="stretch"
              p="20 30"
              bdrs="99"
              hasTransition
              hov="fill"
            >
              <Inline gc="2">View More</Inline>
              <Icon icon="arrow-right" gc="3" />
            </Button>
          </Flex>
        </Grid>
        <Grid gtr="subgrid" gr="span 3" ji="c" g="30" p={['40', null, '0 40']} bd bdw={['1px 0 0 0', null, '0 0 0 1px']} bdc="white">
          <Frame as="figure" ar="1/1" w="10rem" bdrs="99">
            <Media src="https://cdn.lism-css.com/random/img?category=v&r=3" alt="" width="960" height="640" hasTransition hov="in:zoom" />
          </Frame>
          <Stack g="30">
            <Text class="u--trim" fz="l" fw="bold" ta="center">ムーンストーン</Text>
            <Text class="u--trim" fz="s" o="pp">
              月のエネルギーを宿す神秘の石。感受性を豊かにし、愛を育み、持ち主の魅力を高めてくれるとされます。
            </Text>
          </Stack>
          <Flex w="stretch">
            <Button
              layout="grid"
              gtc="1em 1fr 1em"
              g="15"
              variant="outline"
              href="#"
              jc="center"
              w="stretch"
              p="20 30"
              bdrs="99"
              hasTransition
              hov="fill"
            >
              <Inline gc="2">View More</Inline>
              <Icon icon="arrow-right" gc="3" />
            </Button>
          </Flex>
        </Grid>
      </TileGrid>
    </Stack>
  </Container>
</DemoLayout>

<style>
  @media (any-hover: hover) {
    .-hov\:fill:hover {
      background-color: var(--text) !important;
      color: var(--base) !important;
    }
  }
</style>