News004

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

import { Container, Grid, Flex, Icon, Stack, Text, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
import './_style.css';
---

<DemoLayout title="News004">
  <Container isWrapper="m" bgc="base-2" py="50" hasGutter>
    <Grid gtr={['auto', null, 'auto auto 1fr']} gtc={['auto', null, 'auto 1fr']} g="30">
      <Stack gr="1" gc="1" g="20" min-w={['auto', null, '12rem']}>
        <Text class="u--trim" fz="3xl" fw="light" lts="l">News</Text>
        <Heading level="2" class="u--trim" fz="s" fw="normal" o="pp">Latest Updates</Heading>
      </Stack>
      <Grid gr={['2', null, '1 / -1']} gc={['1', null, '2']} gtc={['auto', 'auto 1fr']} g="30">
        <Grid
          as="a"
          isBoxLink
          href="#"
          gtc="subgrid"
          gc="1 / -1"
          g={['20', '30']}
          bgc="white"
          p="30"
          bdrs="20"
          set="var:hov"
          hasTransition
          hov="-bxsh"
        >
          <Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
            <Text fz="m">2025.07.13</Text>
            <Text d="if" jc="center" fz="xs" lh="xs" c="text" bd p="10 20" bdrs="99" ta="center">New Service</Text>
          </Grid>
          <Flex ai="center" c="text" td="n" g="30">
            <Text hasTransition hov="in:cLink">Introducing "Goal-based Savings" — set a target amount and enjoy building your savings plan.</Text>
            <Flex ai="center" jc="center" p="15" bd bdc="text" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="caret-right" fz="xs" mx-s="auto" />
            </Flex>
          </Flex>
        </Grid>
        <Grid
          as="a"
          isBoxLink
          href="#"
          gtc="subgrid"
          gc="1 / -1"
          g={['20', '30']}
          bgc="white"
          p="30"
          bdrs="20"
          set="var:hov"
          hasTransition
          hov="-bxsh"
        >
          <Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
            <Text fz="m">2025.07.13</Text>
            <Text d="if" jc="center" fz="xs" lh="xs" c="text" bd p="10 20" bdrs="99" ta="center">Security</Text>
          </Grid>
          <Flex ai="center" c="text" td="n" g="30">
            <Text hasTransition hov="in:cLink">Please beware of suspicious emails (phishing scams) impersonating our bank.</Text>
            <Flex ai="center" jc="center" p="15" bd bdc="text" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="caret-right" fz="xs" mx-s="auto" />
            </Flex>
          </Flex>
        </Grid>
        <Grid
          as="a"
          isBoxLink
          href="#"
          gtc="subgrid"
          gc="1 / -1"
          g={['20', '30']}
          bgc="white"
          p="30"
          bdrs="20"
          set="var:hov"
          hasTransition
          hov="-bxsh"
        >
          <Grid gtc={['auto auto', 'auto 1fr']} g="30" jc="start" ai="center">
            <Text fz="m">2025.07.13</Text>
            <Text d="if" jc="center" fz="xs" lh="xs" c="text" bd p="10 20" bdrs="99" ta="center">Important Notice</Text>
          </Grid>
          <Flex ai="center" c="text" td="n" g="30">
            <Text hasTransition hov="in:cLink">Partial revision of online banking service terms and conditions</Text>
            <Flex ai="center" jc="center" p="15" bd bdc="text" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon="caret-right" fz="xs" mx-s="auto" />
            </Flex>
          </Flex>
        </Grid>
      </Grid>
      <Flex gr={['3', null, '2']} gc="1">
        <Button href="#" jc="center" w={['stretch', null, 'auto']} min-w="10rem" fz="s" p="15" bdrs="99">View All</Button>
      </Flex>
    </Grid>
  </Container>
</DemoLayout>

<style>
  @media (any-hover: hover) {
    .-hov\:in\:reverse {
      background-color: var(--_isHov, var(--black));
      color: var(--_isHov, var(--white));
    }
    .-hov\:in\:cLink {
      color: var(--_isHov, var(--link));
    }
  }
</style>

Copy code Code copied!

Copy code Code copied!