Feature008

---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Button } from '@lism-css/ui/astro';

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

<DemoLayout title="Feature008">
  <Container isWrapper="l" bgc="base" py="50" hasGutter>
    <Grid gtr={['auto 1fr auto', null, 'auto 1fr']} gtc={['1fr', null, '1fr auto']} g="40">
      <h2 class="u--trim">この季節だからこそ</h2>
      <Columns cols={['1', '2', '3']} gc="1 / -1" g="40">
        <Stack as="a" isBoxLink href="#" g="30" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="15">
            <Text class="u--trim" fz="m" fw="bold">夏のおすすめ</Text>
            <Text class="u--trim" fz="s" o="pp">Summer recommended products</Text>
          </Stack>
        </Stack>
        <Stack as="a" isBoxLink href="#" g="30" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="15">
            <Text class="u--trim" fz="m" fw="bold">登山に使いやすい</Text>
            <Text class="u--trim" fz="s" o="pp">Mountain special goods</Text>
          </Stack>
        </Stack>
        <Stack as="a" isBoxLink href="#" g="30" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="15">
            <Text class="u--trim" fz="m" fw="bold">秋の気配を感じて</Text>
            <Text class="u--trim" fz="s" o="pp">Feeling the signs of autumn</Text>
          </Stack>
        </Stack>
        <Stack as="a" isBoxLink href="#" g="30" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="15">
            <Text class="u--trim" fz="m" fw="bold">旅をしたくなる季節</Text>
            <Text class="u--trim" fz="s" o="pp">A season that makes you want to travel</Text>
          </Stack>
        </Stack>
        <Stack as="a" isBoxLink href="#" g="30" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=5" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="15">
            <Text class="u--trim" fz="m" fw="bold">おだやかな気候</Text>
            <Text class="u--trim" fz="s" o="pp">Enjoy the mild weather</Text>
          </Stack>
        </Stack>
        <Stack as="a" isBoxLink href="#" g="30" set="var:hov">
          <Frame as="figure" ar="16/9" bdrs="10" pos="relative">
            <Media src="https://cdn.lism-css.com/random/img?r=6" alt="" width="960" height="640" />
            <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
              <Center h="100%" c="white">
                <Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="15">
            <Text class="u--trim" fz="m" fw="bold">森の中のさえずり</Text>
            <Text class="u--trim" fz="s" o="pp">Feel the chirping in the forest</Text>
          </Stack>
        </Stack>
      </Columns>
      <Button href="#" variant="outline" layout="grid" gr={['3', null, '1']} gc={['1 / -1', null, '2']} min-w="8rem" bdrs="10">
        <span>View All</span>
      </Button>
    </Grid>
  </Container>
</DemoLayout>