Member004

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

import { Container, Frame, Cluster, Grid, Icon, BoxLink, Media, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Member004">
  <Container isWrapper="l" bgc="base" py="50" set="gutter">
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="3xl" fw="normal" ta="center" lts="l">Staff Introduction</Heading>
      <Grid gtc="repeat(auto-fit, minmax(14rem, 1fr))" g="40">
        <Grid gtr="subgrid" gr="span 4" g="30">
          <Frame as="figure" ar="1/1" w="stretch" bdrs="10">
            <Media
              src="https://cdn.lism-css.com/random/img?category=staff&r=1"
              alt=""
              width="960"
              height="640"
              style={{ objectPosition: '50% 20%' }}
            />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">鈴木 太郎</Text>
            <Text class="u--trim" fz="xs" o="-10">代表取締役 / クリエイティブディレクター</Text>
          </Stack>
          <Text class="u--trim" fz="xs" o="-20">
            2010年に当社を設立。クリエイティブの力で数々のクライアント課題を解決。
            プロジェクト全体の品質に目を配り、チームを力強く牽引する。週末のキャンプが何よりの楽しみ。
          </Text>
          <Cluster g="20">
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
          </Cluster>
        </Grid>
        <Grid gtr="subgrid" gr="span 4" g="30">
          <Frame as="figure" ar="1/1" w="stretch" bdrs="10">
            <Media
              src="https://cdn.lism-css.com/random/img?category=staff&r=2"
              alt=""
              width="960"
              height="640"
              style={{ objectPosition: '50% 20%' }}
            />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">佐藤 美咲</Text>
            <Text class="u--trim" fz="xs" o="-10">アートディレクター / UI/UXデザイナー</Text>
          </Stack>
          <Text class="u--trim" fz="xs" o="-20">
            人間の心理や行動に基づいた、直感的で美しいUI/UXデザインを得意とする。
            ユーザーにとって本当に価値のある体験とは何かを常に追求し、ビジュアル全体を統括する。
          </Text>
          <Cluster g="20">
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
          </Cluster>
        </Grid>
        <Grid gtr="subgrid" gr="span 4" g="30">
          <Frame as="figure" ar="1/1" w="stretch" bdrs="10">
            <Media
              src="https://cdn.lism-css.com/random/img?category=staff&r=3"
              alt=""
              width="960"
              height="640"
              style={{ objectPosition: '50% 20%' }}
            />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">高橋 健太</Text>
            <Text class="u--trim" fz="xs" o="-10">テクニカルディレクター / リードエンジニア</Text>
          </Stack>
          <Text class="u--trim" fz="xs" o="-20">
            最新のWeb技術に対する探究心が武器。困難な要件でも、
            最適な技術選定と実装でプロジェクトを成功に導く。後輩の育成にも情熱を注ぐ、頼れる技術リーダー。
          </Text>
          <Cluster g="20">
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
          </Cluster>
        </Grid>
        <Grid gtr="subgrid" gr="span 4" g="30">
          <Frame as="figure" ar="1/1" w="stretch" bdrs="10">
            <Media
              src="https://cdn.lism-css.com/random/img?category=staff&r=4"
              alt=""
              width="960"
              height="640"
              style={{ objectPosition: '50% 20%' }}
            />
          </Frame>
          <Stack g="20">
            <Text class="u--trim" fz="m" fw="bold">田中 雄大</Text>
            <Text class="u--trim" fz="xs" o="-10">Webディレクター / マネージャー</Text>
          </Stack>
          <Text class="u--trim" fz="xs" o="-20">
            クライアントと制作チームの架け橋となり、プロジェクトを円滑に進行させる司令塔。
            丁寧なコミュニケーションと緻密なスケジュール管理で、お客様からの信頼も厚い。
          </Text>
          <Cluster g="20">
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
            <BoxLink href="#" c="text" o="-20" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
          </Cluster>
        </Grid>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>