Update rule-highlight pattern to use to appropriate class (#4759)

* Update rule-highlight pattern to use to appropriate class
* Fix missing highlight rule in the example

---------

Co-authored-by: Bartek Szopka <bartek.szopka@canonical.com>

templates/docs/examples/layouts/brochure-site/_25-75-nested.html

@@ -1,20 +1,23 @@
 <section class="p-section">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row--25-75">
-    <div class="row">
-      <hr class="p-rule">
-    </div>
     <div class="col">
       <h3 class="p-muted-heading">We’re Canonical</h3>
     </div>
     <div class="col">
       <div class="row">
         <div class="col-medium-2 col-3">
+          <hr class="p-rule--highlight">
           <h4 class="p-heading--2"><strong>950+</strong><br>Employees</h4>
         </div>
         <div class="col-medium-2 col-3">
+          <hr class="p-rule--highlight">
           <h4 class="p-heading--2"><strong>89</strong><br>Countries</h4>
         </div>
         <div class="col-medium-2 col-3">
+          <hr class="p-rule--highlight">
           <h4 class="p-heading--2"><strong>78</strong><br>Languages</h4>
         </div>
         <div class="col-9">