<div class="container">
  <article>
    <h1>Automatic Numbering With CSS Counters</h1>

    <h2>Heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, impedit, odit accusamus quidem voluptatum incidunt commodi dolores omnis distinctio quis cumque tempore in beatae vitae sapiente aperiam facere eveniet soluta.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, fugit, cum id voluptates hic debitis autem enim error soluta provident cupiditate nam accusantium natus quisquam quos laudantium esse optio at.
    </p>
    <h3>Sub-Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, nobis, esse, autem voluptate amet eos dolorum ipsa blanditiis ex odio quam laborum sed dolore pariatur ratione reiciendis recusandae repudiandae animi!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, eum, ullam, nobis, earum in praesentium quasi vel quaerat voluptates illum aliquid enim quisquam vitae neque recusandae fugit et quidem officiis.
    </p>
    <h3>Sub-heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, adipisci aspernatur aliquid facere ratione repellendus quaerat eum odio optio nobis tempore quas culpa? Rerum, perferendis accusamus modi eaque veniam deleniti!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, provident illo quaerat vel obcaecati sequi reprehenderit iure totam ut architecto nihil nam rem aut eveniet libero asperiores quasi laborum neque.
    </p>


    <h2>Heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, recusandae molestias aspernatur dicta magni aperiam cupiditate corporis consequatur. Repellendus, pariatur eaque ad consequatur est veritatis itaque rem repellat dignissimos modi.
    </p>
    <h3>Sub-Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, nobis, esse, autem voluptate amet eos dolorum ipsa blanditiis ex odio quam laborum sed dolore pariatur ratione reiciendis recusandae repudiandae animi!
    </p>
    <h3>Sub-heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, adipisci aspernatur aliquid facere ratione repellendus quaerat eum odio optio nobis tempore quas culpa? Rerum, perferendis accusamus modi eaque veniam deleniti!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, provident illo quaerat vel obcaecati sequi reprehenderit iure totam ut architecto nihil nam rem aut eveniet libero asperiores quasi laborum neque.
    </p>

    <h2>Heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, impedit, beatae animi vitae incidunt voluptatum odit tempora ea aut cumque voluptate culpa rem deserunt repellendus nihil et accusamus quisquam nemo.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, ipsa adipisci corrupti ex dolores illo asperiores saepe labore sint ad sapiente cum ea culpa repellendus voluptates quis consequuntur. Mollitia, delectus.
    </p>
    <h3>Sub-heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, veniam nam exercitationem fuga vel id cum similique dolores quibusdam ullam voluptate doloremque atque dolorem consectetur nulla harum numquam reprehenderit eligendi.
    </p>
    <h3>Sub-heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, magnam, facere, repudiandae iusto assumenda ipsum consectetur sunt recusandae obcaecati commodi asperiores totam labore nam distinctio placeat itaque unde quisquam quod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, et, ex, deleniti, corporis facilis hic accusantium odio veritatis nemo facere laudantium cupiditate ipsam optio repudiandae nesciunt possimus quae quam veniam!
    </p>
    <h3>Sub-heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, tenetur, veniam enim officiis voluptate minus optio corporis tempore ullam similique mollitia nesciunt odit molestiae necessitatibus quaerat ut cum cumque quibusdam?
    </p>

    <h2>Heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, molestias, fugit sapiente veniam repellat nulla asperiores placeat minima quas facilis repellendus qui officiis quae tenetur ipsum architecto aspernatur vel. Pariatur.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, at velit ratione asperiores maiores inventore beatae animi odio nulla quod perferendis commodi nam sequi ipsa et quis pariatur totam adipisci?
    </p>

    <h2>Heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatem, ratione, suscipit voluptates quis accusamus nesciunt omnis delectus recusandae consequatur dolore dolores laborum numquam ipsum sequi! Id, quo doloribus voluptas?
    </p>
    <h3>Sub-Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, nobis, esse, autem voluptate amet eos dolorum ipsa blanditiis ex odio quam laborum sed dolore pariatur ratione reiciendis recusandae repudiandae animi!
    </p>
    <h3>Sub-heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, adipisci aspernatur aliquid facere ratione repellendus quaerat eum odio optio nobis tempore quas culpa? Rerum, perferendis accusamus modi eaque veniam deleniti!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, provident illo quaerat vel obcaecati sequi reprehenderit iure totam ut architecto nihil nam rem aut eveniet libero asperiores quasi laborum neque.
    </p>

  </article>
</div>