News005

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

import { Box, Stack, Container, Frame, Grid, Media, HTML, Flex, Layer, Center, Columns } 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">
				<HTML.h lv="2" fz="2xl" fw="bold">ニュース</HTML.h>
			</Flex>
			<Columns cols={['1', '2', '4']} gr="2" gc={['1', '1 / 3']} g="30">
				<Grid gtr="subgrid" gr="span 2" g="5" isLinkBox href="#" ov="h" setHov>
					<Frame tag="figure" ar="og" pos="rel" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?category=working&r=1" alt="" width="960" height="640" />
						<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
							<Center h="100%" c="white">
								<HTML.span fz="l" fs="i" fw="light" lts="l" px="20" py="10">View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Stack g="20" py="20">
						<Flex ai="center" g="20">
							<Flex variant="cluster" g="15">
								<Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">NEWS</Box>
							</Flex>
							<HTML.p class="u-trim" fz="s" o="-20">2025.10.30</HTML.p>
						</Flex>
						<HTML.p className="u--trimHL" fz="m">年末年始休業のお知らせ（2025/12/28〜2026/1/4）</HTML.p>
					</Stack>
				</Grid>
				<Grid gtr="subgrid" gr="span 2" g="5" isLinkBox href="#" ov="h" setHov>
					<Frame tag="figure" ar="og" pos="rel" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?category=working&r=2" alt="" width="960" height="640" />
						<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
							<Center h="100%" c="white">
								<HTML.span fz="l" fs="i" fw="light" lts="l" px="20" py="10">View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Stack g="20" py="20">
						<Flex ai="center" g="20">
							<Flex variant="cluster" g="15">
								<Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">AWARDS</Box>
							</Flex>
							<HTML.p class="u-trim" fz="s" o="-20">2025.10.30</HTML.p>
						</Flex>
						<HTML.p className="u--trimHL" fz="m">当社制作の「〇〇」が、国際的デザインアワード「ABC Design Award」を受賞しました</HTML.p>
					</Stack>
				</Grid>
				<Grid gtr="subgrid" gr="span 2" g="5" isLinkBox href="#" ov="h" setHov>
					<Frame tag="figure" ar="og" pos="rel" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?category=working&r=3" alt="" width="960" height="640" />
						<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
							<Center h="100%" c="white">
								<HTML.span fz="l" fs="i" fw="light" lts="l" px="20" py="10">View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Stack g="20" py="20">
						<Flex ai="center" g="20">
							<Flex variant="cluster" g="15">
								<Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">MEDIA</Box>
							</Flex>
							<HTML.p class="u-trim" fz="s" o="-20">2025.10.30</HTML.p>
						</Flex>
						<HTML.p className="u--trimHL" fz="m">デザイン専門誌「Design Today」11月号に、弊社代表のインタビューが掲載されました</HTML.p>
					</Stack>
				</Grid>
				<Grid gtr="subgrid" gr="span 2" g="5" isLinkBox href="#" ov="h" setHov>
					<Frame tag="figure" ar="og" pos="rel" bdrs="10">
						<Media src="https://cdn.lism-css.com/img/random-2510?category=working&r=4" alt="" width="960" height="640" />
						<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
							<Center h="100%" c="white">
								<HTML.span fz="l" fs="i" fw="light" lts="l" px="20" py="10">View More</HTML.span>
							</Center>
						</Layer>
					</Frame>
					<Stack g="20" py="20">
						<Flex ai="center" g="20">
							<Flex variant="cluster" g="15">
								<Box bgc="black" c="white" fz="2xs" bdrs="10" lh="1" p="10 20">COLUMN</Box>
							</Flex>
							<HTML.p class="u-trim" fz="s" o="-20">2025.10.30</HTML.p>
						</Flex>
						<HTML.p className="u--trimHL" fz="m">デザインコラムを更新しました「ブランディングにおけるロゴデザインの役割」</HTML.p>
					</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>