Problem with a self-nesting counters

HTML

<h2> The first case </h2>
<section style="counter-reset:ct"> 
  <span> Section 1 </span>
  <article style="counter-reset:ct"> Article 1</article>
  <article> Article 2</article>
  <article> Article 3</article>
</section>
<section>
  <span> Section 2 </span>
  <article style="counter-reset:ct"> Article 1</article>
  <article> Article 2</article>
  <article> Article 3</article>
</section>

<h2> The second case </h2>
<div style="counter-reset: ct">Preceding div</div>
<section>
  <span> Section 1 </span>
  <article style="counter-reset:ct"> Article 1</article>
  <article> Article 2</article>
  <article> Article 3</article>
</section>
<section>
  <span> Section 2 </span>
  <article style="counter-reset:ct"> Article 1</article>
  <article> Article 2</article>
  <article> Article 3</article>
</section>

CSS

section {
  list-style-type: none
}

section,article{
  counter-increment: ct;
  padding-left: 10px;
}
section::before, article::before{
  content: counters(ct, '.')
}