Feature011

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

import { Container, Grid, Box, Flex, Center, Icon, Text, Inline } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="Feature011">
  <Container isWrapper="m" bgc="base-2" py="50" hasGutter>
    <Grid
      gt={[
        '"title" "body" "link" / 1fr',
        null,
        `"title link"
				 "body body" / auto 1fr`,
      ]}
      g="40"
    >
      <Box ga="title">
        <h2 class="u--trim">サービスの特徴について</h2>
      </Box>
      <Grid ga="body" gtc={['1fr auto', null, 'auto 1fr auto']} g="30">
        <Grid
          as="a"
          isBoxLink
          href="#"
          gtc="subgrid"
          gc="1 / -1"
          g={['20', '30', '40']}
          bgc="base"
          p={['20', '30']}
          bdrs="10"
          set="var:hov"
          hasTransition
          ai="center"
          hov="-bxsh"
        >
          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
            <Flex g={['20', null, '30']} ai="center">
              <Inline layout="center" fxsh="0" fz="xs" lh="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 1</Inline>
              <Text fz="m" fw="bold">楽しみながら計画的に資産形成</Text>
            </Flex>
            <Flex ai="center" c="text" td="none" g="30">
              <Text>目標金額を設定して貯蓄ができる「目的別預金」が登場。楽しみながら計画的な資産形成が行えます。</Text>
            </Flex>
          </Grid>
          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
            <Icon icon="arrow-right" fz="s" />
          </Center>
        </Grid>
        <Grid
          as="a"
          isBoxLink
          href="#"
          gtc="subgrid"
          gc="1 / -1"
          g={['20', null, '40']}
          bgc="base"
          p={['20', '30']}
          bdrs="10"
          set="var:hov"
          hasTransition
          ai="center"
          hov="-bxsh"
        >
          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
            <Flex g={['20', null, '30']} ai="center">
              <Inline layout="center" fxsh="0" fz="xs" lh="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 2</Inline>
              <Text fz="m" fw="bold">安心のセキュリティ体制</Text>
            </Flex>
            <Flex ai="center" c="text" td="none" g="30">
              <Text>通信の暗号化や二段階認証を導入。お客様の大切な資産と個人情報を厳重に保護します。</Text>
            </Flex>
          </Grid>
          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
            <Icon icon="arrow-right" fz="s" />
          </Center>
        </Grid>
        <Grid
          as="a"
          isBoxLink
          href="#"
          gtc="subgrid"
          gc="1 / -1"
          g={['20', null, '40']}
          bgc="base"
          p={['20', '30']}
          bdrs="10"
          set="var:hov"
          hasTransition
          ai="center"
          hov="-bxsh"
        >
          <Grid gtc="subgrid" g="inherit" gc={['1', null, '1 / span 2']}>
            <Flex g={['20', null, '30']} ai="center">
              <Inline layout="center" fxsh="0" fz="xs" lh="xs" c="base" py="10" px={['15', '20']} bgc="text" bdrs="99">POINT 3</Inline>
              <Text fz="m" fw="bold">必要なものはスマホだけ！</Text>
            </Flex>
            <Flex ai="center" c="text" td="none" g="30">
              <Text>口座開設から運用状況の確認までスマホアプリで完結。いつでも手軽に資産をチェックできます。</Text>
            </Flex>
          </Grid>
          <Center w="fit" bd p="15" bdrs="99" hasTransition hov="in:reverse">
            <Icon icon="arrow-right" fz="s" />
          </Center>
        </Grid>
      </Grid>
      <Flex ga="link" ai="flex-end" jc="flex-end">
        <Button href="#" variant="outline" w={['stretch', null, 'auto']} min-w="8rem" fz="s" bd bdc="text" py="15" bdrs="10">View Detail</Button>
      </Flex>
    </Grid>
  </Container>
</DemoLayout>

<style is:inline>
  @media (any-hover: hover) {
    .-hov\:in\:reverse {
      background-color: var(--_isHov, var(--text));
      color: var(--_isHov, var(--base));
      border-color: var(--text);
    }
  }
</style>