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 '@/components/ex/Button/index.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>