02 - Contact over a background photo

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

import { ChatIcon, UserIcon } from '@lism-css/icons/astro';
import { Box, Columns, Container, Frame, Heading, Icon, Inline, Layer, Media, Stack, Text } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="02 - Contact over a background photo">
  <Box pos="relative">
    <Frame isLayer>
      <Media src="https://images.unsplash.com/photo-1621831337128-35676ca30868?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
    </Frame>
    <Layer bgc="black:75%" />
    <Container isWrapper="s" layout="center" g="40" pos="relative" c="white" py="60" min-h="65vh" hasGutter>
      {/* Section heading */}
      <Stack g="20" ai="center">
        <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">Get in Touch</Heading>
        <Inline class="u--trim" fz="s" o="pp" ta="center">— Contact —</Inline>
      </Stack>
      <Text>
        For questions about our services or quote requests, feel free to contact us here. After reviewing your inquiry, a member of our team will get
        back to you.
      </Text>
      <Columns cols={[1, null, 2]} g="25">
        <Button href="#" g="15" variant="outline" c="white" jc="center" bdrs="10" py="15" fw="500" hasTransition hov={{ bgc: 'black', bdc: 'black' }}>
          <Icon icon={ChatIcon} fz="1.4em" />
          <span>Chat with us</span>
        </Button>
        <Button
          href="#"
          g="15"
          jc="center"
          bgc="base"
          c="text"
          bdc="transparent"
          bdrs="10"
          py="15"
          fw="500"
          hasTransition
          hov={{ bgc: 'text', c: 'base' }}
        >
          <Icon icon={UserIcon} fz="1.4em" />
          <span>Contact us</span>
        </Button>
      </Columns>
    </Container>
  </Box>
</DemoLayout>