Section007

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

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

<DemoLayout title="Section007">
  <Container pos="relative">
    <TileGrid isLayer cols={['2', null, '4']} rows={['2', null, '1']} g="0">
      <Frame as="figure" gr={['1', null, '1']} gc={['1', null, '1']} g="15">
        <Media src="https://cdn.lism-css.com/random/img?category=v&r=1" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['1', null, '1']} gc={['2', null, '2']} g="15">
        <Media src="https://cdn.lism-css.com/random/img?category=v&r=2" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['2', null, '1']} gc={['1', null, '3']} g="15">
        <Media src="https://cdn.lism-css.com/random/img?category=v&r=3" alt="" width="960" height="640" />
      </Frame>
      <Frame as="figure" gr={['2', null, '1']} gc={['2', null, '4']} g="15">
        <Media src="https://cdn.lism-css.com/random/img?category=v&r=4" alt="" width="960" height="640" />
      </Frame>
    </TileGrid>
    <Layer style={{ backdropFilter: 'blur(8px)' }} bgc="black:30%" z="0" />
    <Wrapper contentSize="s" hasGutter py="60" c="white" pos="relative">
      <Stack g="40">
        <Stack g="30" ai="center">
          <Text class="u--trim" fz="5xl" fw="100" lts="l">Feature</Text>
          <Heading level="2" class="u--trim" fz="l" fw="normal" lts="l">私たちの製品のこと</Heading>
        </Stack>
        <Stack g="30">
          <p>
            どんなに美しいデザインも、使い心地が伴わなければ意味がありません。
            私たちは、触れた瞬間に意図が伝わる、直感的でシームレスな操作性を追求しました。
          </p>
          <p>
            光の点滅や、耳に心地よい操作音、滑らかなダイヤルの感触。五感に訴えかける細やかな設計が、
            日々の何気ない動作をストレスのない、豊かな体験へと昇華させます。 テクノロジーを意識させない、水のような自然な使い心地をお楽しみください。
          </p>
        </Stack>
        <Flex jc="center">
          <Button layout="grid" href="#" variant="outline" min-w="14rem" py="15" c="white" bdrs="99">
            <span>View More</span>
          </Button>
        </Flex>
      </Stack>
    </Wrapper>
  </Container>
</DemoLayout>