Posts03

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

import { Box, Stack, Container, Frame, Grid, Media, Flex, Layer, Center, Columns, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="Posts03">
  <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">
        <Heading level="2" fz="2xl" fw="bold">News</Heading>
      </Flex>
      <Columns cols={['1', '2', '4']} gr="2" gc={['1', '1 / 3']} g="30">
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media
              src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=max&w=1920&q=80"
              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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">NEWS</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">Year-end and New Year holiday notice (2025/12/28 - 2026/1/4)</Text>
          </Stack>
        </Grid>
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=max&w=1920&q=80" 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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">AWARDS</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">Our project "XX" has won the international "ABC Design Award"</Text>
          </Stack>
        </Grid>
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media
              src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?auto=format&fit=max&w=1920&q=80"
              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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">MEDIA</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">Our CEO's interview featured in the November issue of "Design Today" magazine</Text>
          </Stack>
        </Grid>
        <Grid as="a" gtr="subgrid" gr="span 2" g="5" isBoxLink href="#" ov="h" set="hov">
          <Frame as="figure" ar="og" pos="relative" bdrs="10">
            <Media src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=max&w=1920&q=80" 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="l" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
              </Center>
            </Layer>
          </Frame>
          <Stack g="20" py="20">
            <Flex ai="center" g="20">
              <Flex g="15">
                <Box bgc="black" c="white" fz="2xs" bdrs="10" hl="0" p="10 20">COLUMN</Box>
              </Flex>
              <Text class="u--trim" fz="s" o="pp">2025.10.30</Text>
            </Flex>
            <Text class="u--trim" fz="m">Design column updated: "The Role of Logo Design in Branding"</Text>
          </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>