Steps

<Stack g="40">
  <Stack g="20">
    <Stack g="15" ai="center" fxd={[null, 'row']}>
      <Lism d="inline-flex" lh="1" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
        <span className="-fz:xs">Step.</span>
        <span className="-fz:l">1</span>
      </Lism>
      <Lism as="h3" fz="l">
        <Fragment>Step 1 Title</Fragment>
      </Lism>
    </Stack>
    <Flow flow="s" px="15">
      <DummyText lang="en" length="s" />
    </Flow>
  </Stack>

  <Stack g="20">
    <Stack g="15" ai="center" fxd={[null, 'row']}>
      <Lism d="inline-flex" lh="1" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
        <span className="-fz:xs">Step.</span>
        <span className="-fz:l">2</span>
      </Lism>
      <Lism as="h3" fz="l">
        <Fragment>Step 2 Title</Fragment>
      </Lism>
    </Stack>
    <Flow flow="s" px="15">
      <DummyText lang="en" length="s" />
      <DummyText lang="en" length="codes" />
    </Flow>
  </Stack>

  <Stack g="20">
    <Stack g="15" ai="center" fxd={[null, 'row']}>
      <Lism d="inline-flex" lh="1" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99">
        <span className="-fz:xs">Step.</span>
        <span className="-fz:l">3</span>
      </Lism>
      <Lism as="h3" fz="l">
        <Fragment>Step 3 Title</Fragment>
      </Lism>
    </Stack>
    <Flow flow="s" px="15">
      <DummyText lang="en" length="l" />
    </Flow>
  </Stack>
</Stack>

<div class="l--stack -g:40">
  <div class="l--stack -g:20">
    <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
      <div class="-d:inline-flex -lh:1 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
        <span class="-fz:xs">Step.</span>
        <span class="-fz:l">1</span>
      </div>
      <h3 class="-fz:l">Step 1 Title</h3>
    </div>
    <div class="l--flow -flow:s -px:15">
      <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
    </div>
  </div>
  <div class="l--stack -g:20">
    <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
      <div class="-d:inline-flex -lh:1 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
        <span class="-fz:xs">Step.</span>
        <span class="-fz:l">2</span>
      </div>
      <h3 class="-fz:l">Step 2 Title</h3>
    </div>
    <div class="l--flow -flow:s -px:15">
      <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
      <p>
        Lorem ipsum dolor <i>sit amet</i>. consectetur <a href="###">adipisicing elit</a>, sed do eiusmod tempor. Non facere
        <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident.
      </p>
    </div>
  </div>
  <div class="l--stack -g:20">
    <div class="l--stack -g:15 -ai:center -fxd_sm" style="--fxd_sm: row">
      <div class="-d:inline-flex -lh:1 -g:5 -px:15 -py:10 -ai:center -c:base -bgc:text -fs:italic -bdrs:99">
        <span class="-fz:xs">Step.</span>
        <span class="-fz:l">3</span>
      </div>
      <h3 class="-fz:l">Step 3 Title</h3>
    </div>
    <div class="l--flow -flow:s -px:15">
      <p>
        Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
      </p>
    </div>
  </div>
</div>