Testimonials001

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

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

<DemoLayout title="Testimonials001">
  <Container isWrapper="l" bgc="gray:5%" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">お客様の声</Heading>
      <AutoColumns cols="20rem" g="30">
        <Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
          <Grid gtc="auto 1fr" ai="center" g="20">
            <Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
              <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
            </Frame>
            <Stack w="stretch" g="20">
              <Text class="u--trim" fz="m" fw="bold">自由な時間が増えた</Text>
              <Text class="u--trim" fz="s" o="pp">30代 / 会社員</Text>
            </Stack>
          </Grid>
          <Text class="u--trim" fz="m" o="p">
            仕事から帰ると部屋がきれいになっているのが嬉しいです。面倒な掃除から解放されて、平日の夜にゆとりができました。
          </Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
          <Grid gtc="auto 1fr" ai="center" g="20">
            <Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
              <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
            </Frame>
            <Stack w="stretch" g="20">
              <Text class="u--trim" fz="m" fw="bold">まるでもう一人の自分</Text>
              <Text class="u--trim" fz="s" o="pp">40代 / 主婦</Text>
            </Stack>
          </Grid>
          <Text class="u--trim" fz="m" o="p">
            材料を入れてボタンを押すだけで本格的な煮込み料理が完成。 火を使わないので、子供から目を離さずに調理できて安心です。
          </Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
          <Grid gtc="auto 1fr" ai="center" g="20">
            <Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
              <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
            </Frame>
            <Stack w="stretch" g="20">
              <Text class="u--trim" fz="m" fw="bold">気づいた時にすぐ！</Text>
              <Text class="u--trim" fz="s" o="pp">20代 / 大学生</Text>
            </Stack>
          </Grid>
          <Text class="u--trim" fz="m" o="p">
            気づいた時にサッと掃除できる手軽さが最高です。 コードレスなので、車の中の掃除にも使えて本当に便利だと思います。
          </Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
          <Grid gtc="auto 1fr" ai="center" g="20">
            <Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
              <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
            </Frame>
            <Stack w="stretch" g="20">
              <Text class="u--trim" fz="m" fw="bold">食後の時間にゆとりを</Text>
              <Text class="u--trim" fz="s" o="pp">30代 / パート</Text>
            </Stack>
          </Grid>
          <Text class="u--trim" fz="m" o="p">
            毎日の食器洗いの手間がなくなり、食後に家族とゆっくり過ごせる時間が増えました。 手洗いよりきれいに洗える気がします。
          </Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
          <Grid gtc="auto 1fr" ai="center" g="20">
            <Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
              <Media src="https://cdn.lism-css.com/random/img?r=5" alt="" width="960" height="640" />
            </Frame>
            <Stack w="stretch" g="20">
              <Text class="u--trim" fz="m" fw="bold">ヘルシーなのに本格的</Text>
              <Text class="u--trim" fz="s" o="pp">40代 / 会社員</Text>
            </Stack>
          </Grid>
          <Text class="u--trim" fz="m" o="p">
            油を使わずに揚げ物ができるので、ヘルシーで後片付けも楽ちんです。 外はサクサク、中はジューシーで味も本格的です。
          </Text>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" bgc="white" p="30" bdrs="20" bxsh="20">
          <Grid gtc="auto 1fr" ai="center" g="20">
            <Frame as="figure" ar="1/1" w="stretch" max-w="4.5rem" bdrs="99">
              <Media src="https://cdn.lism-css.com/random/img?r=6" alt="" width="960" height="640" />
            </Frame>
            <Stack w="stretch" g="20">
              <Text class="u--trim" fz="m" fw="bold">暮らしの良き相棒</Text>
              <Text class="u--trim" fz="s" o="pp">20代 / ITエンジニア</Text>
            </Stack>
          </Grid>
          <Text class="u--trim" fz="m" o="p">
            声だけで音楽をかけたり天気を調べたりできるのが未来的。 朝の忙しい時間に、ニュースを聞きながら準備できるのがお気に入り。
          </Text>
        </Grid>
      </AutoColumns>
    </Stack>
  </Container>
</DemoLayout>