From 00e395fbb7481cd9e8cb433fa5292b055c1b0b99 Mon Sep 17 00:00:00 2001
From: Eve Martin <eve.martin@ocado.com>
Date: Thu, 18 Jul 2024 10:35:18 +0000
Subject: [PATCH] addressed PR comments

---
 .../portal/sass/partials/_carousel.scss       | 20 +++++++++++++++++++
 .../static/portal/sass/partials/_images.scss  | 12 -----------
 portal/templates/portal/ten_year_map.html     | 12 +++++------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/portal/static/portal/sass/partials/_carousel.scss b/portal/static/portal/sass/partials/_carousel.scss
index 75723ca24..5542fef03 100644
--- a/portal/static/portal/sass/partials/_carousel.scss
+++ b/portal/static/portal/sass/partials/_carousel.scss
@@ -156,3 +156,23 @@
   /* shrink padding because cards have their own */
   @include _padding(0px, 2px, 0px, 2px);
 }
+
+.carousel-button {
+  margin-top: 2rem;
+}
+
+.carousel-image {
+  margin-top: 15px;
+}
+
+.carousel-image--column {
+  padding-right: 20px;
+}
+
+.carousel-column--images {
+  margin-top: -15px;
+}
+
+.carousel-header {
+  margin-top: 0rem !important;
+}
diff --git a/portal/static/portal/sass/partials/_images.scss b/portal/static/portal/sass/partials/_images.scss
index 7bb3cc9a3..155729d0c 100644
--- a/portal/static/portal/sass/partials/_images.scss
+++ b/portal/static/portal/sass/partials/_images.scss
@@ -83,18 +83,6 @@ img {
   position: relative;
 }
 
-.ten-year-button {
-  margin-top: 2rem;
-}
-
-.ten-year-carousel-image {
-  margin-top: 15px;
-}
-
-.ten-year-carousel-image--column {
-  padding-right: 20px;
-}
-
 #hatfield {
   left: 34.5%;
   top: 26.7%;
diff --git a/portal/templates/portal/ten_year_map.html b/portal/templates/portal/ten_year_map.html
index 2d99b85fb..9eec66bca 100644
--- a/portal/templates/portal/ten_year_map.html
+++ b/portal/templates/portal/ten_year_map.html
@@ -50,16 +50,16 @@
                     <div class="carousel-inner" role="listbox">
                         <div class="item active" id="hatfield-carousel">
                             <div>
-                                <div class="col-sm-6">
+                                <div class="col-sm-6 carousel-column--images">
                                     <div class="row carousel-image-wrapper">
-                                        <img src="{% static 'portal/img/howe_dell_1.png' %}" class="ten-year-carousel-image ten-year-carousel-image--column" alt="Code for Life volunteers outside Howe Dell Primary School">
+                                        <img src="{% static 'portal/img/howe_dell_1.png' %}" class="carousel-image carousel-image--column" alt="Code for Life volunteers outside Howe Dell Primary School">
                                     </div>
                                     <div class="row carousel-image-wrapper">
-                                        <img src="{% static 'portal/img/howe_dell_2.png' %}" class="ten-year-carousel-image ten-year-carousel-image--column" alt="CfL volunteers outside Howe Dell Primary School showing off their Code for Life T-shirts">
+                                        <img src="{% static 'portal/img/howe_dell_2.png' %}" class="carousel-image carousel-image--column" alt="CfL volunteers outside Howe Dell Primary School showing off their Code for Life T-shirts">
                                     </div>
                                 </div>
                                 <div class="col-sm-6 carousel-text">
-                                    <h4>
+                                    <h4 class="carousel-header">
                                         <b>Howe Dell Primary School, Hatfield, UK</b>
                                     </h4>
                                     <h5>
@@ -76,13 +76,13 @@ <h5>
                                         The children's designs were exceptional, making the judging process challenging, but ultimately a few standout innovations were 
                                         selected.
                                     </p>
-                                    <div class="ten-year-button">
+                                    <div class="carousel-button">
                                         <a href="https://www.linkedin.com/company/code-for-life-uk/posts/?feedView=all" target="_blank" class="button button--primary button-right-arrow">Learn more</a>
                                     </div>
                                 </div>
                             </div>
                             <div>
-                                <img src="{% static 'portal/img/howe_dell_3.png' %}" class="ten-year-carousel-image"" alt="The three winners of Howe Dell Primary School's robot design challenge">
+                                <img src="{% static 'portal/img/howe_dell_3.png' %}" class="carousel-image"" alt="The three winners of Howe Dell Primary School's robot design challenge">
                             </div>
                         </div>
                         <div class="item" id="barcelona-carousel">