04 - Timeline with large years

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

import { Stack, Container, Frame, Grid, Media, Flow, Text, Heading } from 'lism-css/astro';
---

<DemoLayout title="About04">
  <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=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet" />
  </Fragment>
  <Container isWrapper="m" bgc="base" py="50" hasGutter style={{ '--ff--accent': "'Playfair Display', Georgia, serif" }}>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="3xl" fw="bold" ff="accent" ta="center">History of the Workshop</Heading>
      <Stack bd-bs>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">1968</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">Founded as a woodworking shop</Text>
            <p>
              Our founder, Matsuo Yamada, started in a small workshop on the edge of town. He took orders from local furniture stores and made chairs
              and desks one at a time, by hand.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.pexels.com/photos/30907888/pexels-photo-30907888.jpeg?auto=compress&cs=tinysrgb&w=1920"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">1994</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">Launched our own brand "MATSUO"</Text>
            <p>
              The second generation took over and shifted from wholesale work to an in-house brand. Our solid-wood chairs drew attention at trade
              shows and reached furniture stores across the country.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.unsplash.com/photo-1704751513218-4a03217ff91e?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">2012</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">Opened our own showroom</Text>
            <p>
              We built a showroom next to the workshop, a place where the makers can talk with customers directly. Repairs and reupholstery requests
              started here as well.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media
                src="https://images.unsplash.com/photo-1613906800797-d5d4fb2f7bbb?auto=format&fit=max&w=1920&q=80"
                alt=""
                width="960"
                height="640"
              />
            </Frame>
          </Flow>
        </Grid>
        <Grid gtc={['auto', null, '16rem 1fr']} g="50 40" bd-be py="40">
          <Text class="u--trim" ff="accent" fz="5xl" fs="i" lh="1">2023</Text>
          <Flow ps={['30', null, '0']}>
            <Text fz="l" fw="bold">Third generation takes over, going abroad</Text>
            <p>
              Under the third generation, we exhibited overseas for the first time. We aim to spread the culture of repairing furniture and using it
              for a long time, at home and abroad.
            </p>
            <Frame as="figure" ar="16/9" bdrs="10">
              <Media src="https://cdn.lism-css.com/img/room/nFsD8915rqe6.webp" alt="" width="960" height="640" />
            </Frame>
          </Flow>
        </Grid>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>