News005

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

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

<DemoLayout title="News005">
  <Container isWrapper="l" py="50" hasGutter>
    <Grid gtc={['1fr', 'auto 1fr']} g="40">
      <Flex gr={['1', '1 / 2']} gc={['1', '1 / 2']} ai="fe" jc="fs">
        <Heading level="2" fz="2xl" fw="bold">ニュース</Heading>
      </Flex>
      <Columns cols={['1', '2', '4']} gr="2" gc={['1', '1 / 3']} g="30">
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="var:hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?category=working&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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">NEWS</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">年末年始休業のお知らせ（2025/12/28〜2026/1/4）</Text>
          </Stack>
        </Grid>
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="var:hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?category=working&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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">AWARDS</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">当社制作の「〇〇」が、国際的デザインアワード「ABC Design Award」を受賞しました</Text>
          </Stack>
        </Grid>
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="var:hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?category=working&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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">MEDIA</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">デザイン専門誌「Design Today」11月号に、弊社代表のインタビューが掲載されました</Text>
          </Stack>
        </Grid>
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="var:hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media src="https://cdn.lism-css.com/random/img?category=working&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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">COLUMN</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">デザインコラムを更新しました「ブランディングにおけるロゴデザインの役割」</Text>
          </Stack>
        </Grid>
      </Columns>
      <Flex gr={['3', '1 / 2']} gc={['1', '2 / 3']} ai="fe" jc="fe">
        <Button href="#" variant="outline" jc="center" w={['stretch', 'auto']} min-w="8rem" fz="s" p="15" bdrs="10">View All</Button>
      </Flex>
    </Grid>
  </Container>
</DemoLayout>