From a8223af61ab480c1808cf059c5a780cfb6cdee92 Mon Sep 17 00:00:00 2001
From: Daniel Miranda <daniel@mozillafoundation.org>
Date: Wed, 22 Sep 2021 12:44:11 -0700
Subject: [PATCH] added new section dividers for news and related products

---
 .../wagtailpages/templates/buyersguide/product_page.html  | 8 +++++---
 source/sass/buyers-guide/views/product.scss               | 6 ++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
index f23d2dbe577..af95fac7726 100644
--- a/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
+++ b/network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html
@@ -259,7 +259,8 @@ <h2 class="h3-heading">{% trans "Artificial Intelligence" %}</h2>
           </section>
         {% endif %}
 
-                  {% if product.updates.count > 0 %}
+        {% if product.updates.count > 0 %}
+        <hr class="pni-section-divider"/>
           <h3 class="h2-heading mb-4 mb-md-5">{% trans "News" %}</h3>
           {% endif %}
           {% if product.updates.count > 0 %}
@@ -274,8 +275,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 %}
diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss
index e4fb1286d7e..bef0185d6c5 100644
--- a/source/sass/buyers-guide/views/product.scss
+++ b/source/sass/buyers-guide/views/product.scss
@@ -475,3 +475,9 @@
   min-width: 290px;
   background: $pni-product-image-background;
 }
+
+.pni-section-divider {
+  border-width: 4px;
+  border-color: $black;
+  padding-bottom: 1em;
+}