7389 section hrs (#7452)

* added new section dividers for news and related products


* updated spacing between news heading and section

Co-authored-by: Daniel Miranda <daniel@mozillafoundation.org>

network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html

@@ -262,10 +262,9 @@ <h2 class="h3-heading">{% trans "Artificial Intelligence" %}</h2>
           </section>
         {% endif %}
 
-                  {% if product.updates.count > 0 %}
-          <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
-          {% endif %}
-          {% if product.updates.count > 0 %}
+        {% if product.updates.count > 0 %}
+          <hr class="pni-section-divider"/>
+          <h3 class="h2-heading mb-3">{% trans "News" %}</h3>
           <div class="mb-5">
             {% for item in product.updates.all %}
             {% with update=item.update %}
@@ -277,8 +276,9 @@ <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
             {% endwith %}
             {% endfor %}
           </div>
-          {% endif %}
-
+        {% endif %}
+
+          <hr class="pni-section-divider"/>
           <h3 class="h2-heading mb-4">{% trans "Related products" %}</h3>
           <div class="row">
             {% for related_product_page in product.related_product_pages.all %}

source/sass/buyers-guide/views/product.scss

@@ -506,3 +506,9 @@
   min-width: 290px;
   background: $pni-product-image-background;
 }
+
+.pni-section-divider {
+  border-width: 4px;
+  border-color: $black;
+  padding-bottom: 1em;
+}