Feature015

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

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

<DemoLayout title="Feature015">
  <Container isWrapper="l" bgc="base" py="50" set="gutter">
    <Stack g="20" ai="center" mb="40">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold">こだわりの品質</Heading>
      <Text class="u--trim" fz="s" ta="center" o="-20">Product Features</Text>
    </Stack>
    <Stack>
      <Grid gtc={['auto', null, 'minmax(20vw, 32%) repeat(2, 1fr)']} g="40" py="40" bd-y-e>
        <Frame as="figure" ar="16/9" bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
        </Frame>
        <Stack class="u--trimChildren" g="20">
          <Text fz="l" fw="bold" lts="l">朝日のように、目覚める一杯<br />ここにある時間</Text>
          <Text fz="s" o="-20">Morning Awakening Blend</Text>
        </Stack>
        <Stack class="u--trimChildren" g="20">
          <p>
            忙しい朝のためにブレンドされた、爽やかな酸味とすっきりとした後味が特徴のコーヒーです。
            シトラスのような明るい香りが五感を優しく呼び覚まし、あなたの一日にポジティブな活力を与えます。
            まずはブラックで、そのクリアな味わいをお楽しみください。
          </p>
        </Stack>
      </Grid>
      <Grid gtc={['auto', null, 'minmax(20vw, 32%) repeat(2, 1fr)']} g="40" py="40" bd-y-e>
        <Frame as="figure" ar="16/9" bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
        </Frame>
        <Stack class="u--trimChildren" g="20">
          <Text fz="l" fw="bold" lts="l">午後のひとときに、深い安らぎ<br />心を満たす一杯</Text>
          <Text fz="s" o="-20">Afternoon Comfort Blend</Text>
        </Stack>
        <Stack class="u--trimChildren" g="20">
          <p>
            読書や休憩のお供に最適な、バランスの取れたマイルドな味わい。
            ナッツのような香ばしさと、ミルクチョコレートのような優しい甘さが、午後のひとときを穏やかで満ち足りたものに変えてくれます。
            心と身体を解きほぐす、安らぎの一杯をどうぞ。
          </p>
        </Stack>
      </Grid>
      <Grid gtc={['auto', null, 'minmax(20vw, 32%) repeat(2, 1fr)']} g="40" py="40">
        <Frame as="figure" ar="16/9" bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
        </Frame>
        <Stack class="u--trimChildren" g="20">
          <Text fz="l" fw="bold" lts="l">心解き放つ、夜のためのブレンド<br />眠りへと誘う</Text>
          <Text fz="s" o="-20">Midnight Calm Decaf</Text>
        </Stack>
        <Stack class="u--trimChildren" g="20">
          <p>
            カフェインを99.9%カットした、夜専用のデカフェコーヒーです。 化学薬品を一切使用せず、天然水だけでカフェインを除去。
            コーヒー本来の豊かなコクと深い香りはそのままに、就寝前のリラックスタイムや、カフェインを控えている方にも安心してお楽しみいただけます。
          </p>
        </Stack>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>