<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Descendant combinator, recursive effect</h1>
      <figure class="callout">
        <p>
          Because the descendant combinator is <strong>recursive</strong>, the padding
          added to each child element applies, resulting in a staggered effect.
        </p>
      </figure>
      <div class="top box">
        <div>
          <p>1 level deep</p>
          <div>
            <p>2 levels deep</p>
            <div>
              <p>3 levels deep</p>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</main>

.top div {
  padding-left: 2em;
}

.top p {
  background: #fff;
  padding: 0.5em;
}

/* Presentational styles */
.top div {
  background: var(--color-primary-x-light);
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
}

.top > div {
  border-bottom: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
}

.top p {
  text-align: left;
  border-left: 1px solid var(--color-primary);
}