News002

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

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

<DemoLayout title="News002">
	<Container isWrapper="l" py="50" hasGutter>
		<Grid gtc={['1fr', 'auto 1fr']} g="40">
			<Flex gr={['1', '1 / 2']} gc={['1', '1 / 2']} ai="flex-e" jc="flex-s">
				<h2>お知らせ</h2>
			</Flex>
			<Box gr="2" , gc={['1', '1 / 3']}>
				<Grid gtc={['1fr', 'repeat(auto-fit, minmax(300px, 1fr))']} gtr="auto auto" g="40">
					<Grid gtr="subgrid" gr="span 2" g="0" isLinkBox href="#" bdrs="10" bxsh="20" ov="hidden" setHov setTransition hov="bxsh">
						<Frame tag="figure" ar="og" pos="rel">
							<Media src="/img/img-5.jpg" 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="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
								</Center>
							</Layer>
						</Frame>
						<Stack g="30" p="30">
							<Cluster g="20">
								<HTML.span class="u-trim" fz="m" fw="bold">2025.07.14</HTML.span>
								<Cluster g="15">
									<Box class="u-trim" bgc="base-2" fz="xs" lh="xs" bdrs="10" p="5 10">セキュリティ</Box>
									<Box class="u-trim" bgc="base-2" fz="xs" lh="xs" bdrs="10" p="5 10">金融</Box>
								</Cluster>
							</Cluster>
							<HTML.p className="u-trim" fz="m" o="-10">不正送金対策の強化に伴うワンタイムパスワードの仕様変更のお知らせ</HTML.p>
						</Stack>
					</Grid>
					<Grid gtr="subgrid" gr="span 2" g="0" isLinkBox href="#" bdrs="10" bxsh="20" ov="hidden" setHov setTransition hov="bxsh">
						<Frame tag="figure" ar="og" pos="rel">
							<Media src="/img/img-4.jpg" 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="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
								</Center>
							</Layer>
						</Frame>
						<Stack g="30" p="30">
							<Cluster g="20">
								<HTML.span class="u-trim" fz="m" fw="bold">2025.07.14</HTML.span>
								<Cluster g="15">
									<Box class="u-trim" bgc="base-2" fz="xs" lh="xs" bdrs="10" p="5 10">重要なお知らせ</Box>
								</Cluster>
							</Cluster>
							<HTML.p className="u-trim" fz="m" o="-10"
								>2025年9月1日よりインターネットバンキングのサービス提供時間を24時間に拡大いたします</HTML.p
							>
						</Stack>
					</Grid>
					<Grid gtr="subgrid" gr="span 2" g="0" isLinkBox href="#" bdrs="10" bxsh="20" ov="hidden" setHov setTransition hov="bxsh">
						<Frame tag="figure" ar="og" pos="rel">
							<Media src="/img/img-2.jpg" 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="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
								</Center>
							</Layer>
						</Frame>
						<Stack g="30" p="30">
							<Cluster g="20">
								<HTML.span class="u-trim" fz="m" fw="bold">2025.07.14</HTML.span>
								<Cluster g="15">
									<Box class="u-trim" bgc="base-2" fz="xs" lh="xs" bdrs="10" p="5 10">キャンペーン</Box>
								</Cluster>
							</Cluster>
							<HTML.p className="u-trim" fz="m" o="-10"
								>現在新規で口座を開設されたお客様を対象に円定期預金の金利を特別優遇するキャンペーンを実施中です</HTML.p
							>
						</Stack>
					</Grid>
				</Grid>
			</Box>
			<Flex gr={['3', '1 / 2']} gc={['1', '2 / 3']} ai="flex-e" jc="flex-e">
				<Button href="#" variant="outline" w={['stretch', 'auto']} min-w="8rem" fz="s" p="15" bdrs="10">View All</Button>
			</Flex>
		</Grid>
	</Container>
</DemoLayout>