General08

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

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

<DemoLayout title="General08">
  <Container isWrapper="l" py="50" hasGutter>
    <Columns cols={[1, null, 3]} g={['30', null, '40']}>
      <Stack g="30">
        <Heading level="2" class="u--trim" fz={['4xl', '5xl']} ff="accent" fw="500" lts="l">Feature</Heading>
        <Text class="u--trim" c="text-2" ta="right">Looking Up at Architecture —</Text>
      </Stack>
      <Frame as="figure" ar={['4/3', null, '3/4']}>
        <Media src="https://images.unsplash.com/photo-1675942870908-846af030c9d8?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
      </Frame>
      <Stack aslf="end" g="30" hl="l">
        <p>
          Next time you walk through the city, try raising your eyes a little. Clouds reflected in glass, facades that change with the light. In this
          month's feature, we explore buildings that mirror the city sky.
        </p>
        <Flex>
          <Button href="#" variant="outline" w="stretch" min-w="8rem" py="15" bdrs="10">View Detail</Button>
        </Flex>
      </Stack>
    </Columns>
  </Container>
</DemoLayout>