02 - Message with a signature

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

import { Wrapper, Grid, Flex, Frame, Media, Stack, Flow, Inline, Heading } from 'lism-css/astro';
---

<DemoLayout title="About02">
  <Fragment slot="head">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400&display=swap" rel="stylesheet" />
  </Fragment>
  <Wrapper contentSize="l" py="50" bgc="base" hasGutter>
    <Stack g="50">
      <Stack class="u--trimAll" g="40">
        <Inline
          fz="min(16vw, 10rem)"
          fw="normal"
          ff="accent"
          ms="-.5rem"
          c="gray"
          o="ppp"
          whs="nowrap"
          style={{ '--ff--accent': "'Libre Baskerville', Georgia, serif" }}>Greeting</Inline
        >
        <Heading level="2" fz="3xl" fw="bold" ff="accent">Message from the CEO</Heading>
      </Stack>
      <Flow hl="l">
        <p>
          In today's world where everything is connected to the internet and vast amounts of data are generated, how to safely and effectively utilize
          that data has become a key source of competitive advantage for businesses.
        </p>
        <p>
          Since our founding, we have focused on technology development in the information security field, providing robust systems and solutions that
          protect our clients' valuable information assets from all threats. While technology evolves daily, our conviction that "trust" from our
          clients is the foundation of our business will never waver. Through world-class security technology and consulting, we will continue to
          contribute to building a social infrastructure where our clients can confidently utilize data and create new value.
        </p>
      </Flow>
      <Flex jc="flex-end">
        <Grid gtc="6rem auto" g="30" ai="center" px="40">
          <Frame as="figure" ar="1/1" bdrs="99">
            <Media
              src="https://cdn.lism-css.com/img/avatar/8KAmN8R1HbuA.webp"
              alt=""
              width="800"
              height="800"
              style={{ objectPosition: '50% 20%' }}
            />
          </Frame>
          <Stack g="20" class="u--trimAll" ff="accent">
            <Inline fz="l">CEO</Inline>
            <Inline fz="xl" fw="bold">Seiji Tanaka</Inline>
          </Stack>
        </Grid>
      </Flex>
    </Stack>
  </Wrapper>
</DemoLayout>