Posts02

---
import { CaretRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Posts02">
  <Container isWrapper="l" 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="2xl" fw="light" lts="l">News</Text>
        <Heading level="2" class="u--trim" fz="xs" o="pp">Latest Updates</Heading>
      </Stack>
      <AutoColumns cols="22rem" gr={['2', null, '1 / -1']} gc={['1', null, '2']} g="30">
        <Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
          <Grid gtc="1fr auto" g="20" jc="start" ai="center">
            <Text fz="s">2025.10.30</Text>
            <Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">COLUMN</Text>
          </Grid>
          <Flex c="text" g="25">
            <Stack class="u--trimAll" g="30">
              <Text hasTransition hov="in:cLink">Design column: "The Importance of Accessibility in UI Design"</Text>
              <Text fz="s" o="pp"
                >We have updated our design column. Learn about the fundamentals of web accessibility and practical tips you can implement today.</Text
              >
            </Stack>
            <Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
            </Flex>
          </Flex>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
          <Grid gtc="1fr auto" g="20" jc="start" ai="center">
            <Text fz="s">2025.10.30</Text>
            <Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">EVENT</Text>
          </Grid>
          <Flex c="text" g="25">
            <Stack class="u--trimAll" g="30">
              <Text hasTransition hov="in:cLink">Speaking at "LOOS DESIGN CONFERENCE 2025"</Text>
              <Text fz="s" o="pp"
                >Our art director will be speaking at one of the largest design conferences in the country on December 5, 2025 (Fri), on the topic
                "The Value Design Brings to Business."</Text
              >
            </Stack>
            <Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
            </Flex>
          </Flex>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
          <Grid gtc="1fr auto" g="20" jc="start" ai="center">
            <Text fz="s">2025.10.30</Text>
            <Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">RELEASE</Text>
          </Grid>
          <Flex c="text" g="25">
            <Stack class="u--trimAll" g="30">
              <Text hasTransition hov="in:cLink">Launching "Branding Support Package for Startups"</Text>
              <Text fz="s" o="pp"
                >We have started offering a fast and high-quality branding support package for startups. From logo to website and business cards — all
                provided as a one-stop solution.</Text
              >
            </Stack>
            <Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
            </Flex>
          </Flex>
        </Grid>
        <Grid gtr="subgrid" gr="span 2" g="30" isBoxLink as="a" href="#" bgc="base" p="30" bdrs="20" set="hov" hasTransition hov="-bxsh">
          <Grid gtc="1fr auto" g="20" jc="start" ai="center">
            <Text fz="s">2025.10.30</Text>
            <Text d="if" jc="center" fz="2xs" hl="0" bgc="base-2" c="text" p="10 20" bdrs="99">NEWS</Text>
          </Grid>
          <Flex c="text" g="25">
            <Stack class="u--trimAll" g="30">
              <Text hasTransition hov="in:cLink">Notice of office relocation and phone number change</Text>
              <Text fz="s" o="pp"
                >Due to business expansion, we have relocated our office to the address below. We will continue to strive for excellence and
                appreciate your continued support.</Text
              >
            </Stack>
            <Flex d={['none', 'flex']} ai="center" jc="center" aslf="e" fxsh="0" p="15" bd bdc="black" bdrs="99" hasTransition hov="in:reverse">
              <Icon icon={CaretRightIcon} weight="bold" fz="xs" ms="auto" />
            </Flex>
          </Flex>
        </Grid>
      </AutoColumns>
      <Flex gr={['3', null, '2']} gc="1">
        <Button href="#" jc="center" w={['stretch', null, 'auto']} min-w="8rem" 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>