News002

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

import { Box, Cluster, Stack, Container, Frame, Grid, Media, Flex, Layer, Center, Text, Inline } 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-end" jc="flex-start">
        <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 as="a" gtr="subgrid" gr="span 2" g="0" isBoxLink href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
            <Frame as="figure" ar="og" pos="relative">
              <Media src="/img/img-5.jpg" 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="30" p="30">
              <Cluster g="20">
                <Inline class="u--trim" fz="m" fw="bold">2025.07.14</Inline>
                <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>
              <Text className="u--trim" fz="m" o="p">不正送金対策の強化に伴うワンタイムパスワードの仕様変更のお知らせ</Text>
            </Stack>
          </Grid>
          <Grid as="a" gtr="subgrid" gr="span 2" g="0" isBoxLink href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
            <Frame as="figure" ar="og" pos="relative">
              <Media src="/img/img-4.jpg" 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="30" p="30">
              <Cluster g="20">
                <Inline class="u--trim" fz="m" fw="bold">2025.07.14</Inline>
                <Cluster g="15">
                  <Box class="u--trim" bgc="base-2" fz="xs" lh="xs" bdrs="10" p="5 10">重要なお知らせ</Box>
                </Cluster>
              </Cluster>
              <Text className="u--trim" fz="m" o="p">2025年9月1日よりインターネットバンキングのサービス提供時間を24時間に拡大いたします</Text>
            </Stack>
          </Grid>
          <Grid as="a" gtr="subgrid" gr="span 2" g="0" isBoxLink href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
            <Frame as="figure" ar="og" pos="relative">
              <Media src="/img/img-2.jpg" 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="30" p="30">
              <Cluster g="20">
                <Inline class="u--trim" fz="m" fw="bold">2025.07.14</Inline>
                <Cluster g="15">
                  <Box class="u--trim" bgc="base-2" fz="xs" lh="xs" bdrs="10" p="5 10">キャンペーン</Box>
                </Cluster>
              </Cluster>
              <Text className="u--trim" fz="m" o="p"
                >現在新規で口座を開設されたお客様を対象に円定期預金の金利を特別優遇するキャンペーンを実施中です</Text
              >
            </Stack>
          </Grid>
        </Grid>
      </Box>
      <Flex gr={['3', '1 / 2']} gc={['1', '2 / 3']} ai="flex-end" jc="flex-end">
        <Button href="#" variant="outline" w={['stretch', 'auto']} min-w="8rem" fz="s" p="15" bdrs="10">View All</Button>
      </Flex>
    </Grid>
  </Container>
</DemoLayout>