From cd4a6e2616c3e1f0c8072fb647ec2404335b17bb Mon Sep 17 00:00:00 2001
From: RitwikSrivastava <45959816+RitwikSrivastava@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:07:49 +0530
Subject: [PATCH] Fix career-carousel image (#496)

* Fix career carousel to show 4 cards.

Also fixed the right angle icon in the scroller and the 'Read More'
link.

---------

Co-authored-by: David Bosschaert <bosschae@adobe.com>
---
 blocks/career-carousel/career-carousel.css | 15 ++++++++++-----
 blocks/career-carousel/career-carousel.js  |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/blocks/career-carousel/career-carousel.css b/blocks/career-carousel/career-carousel.css
index e6f68883..77d4266c 100644
--- a/blocks/career-carousel/career-carousel.css
+++ b/blocks/career-carousel/career-carousel.css
@@ -1,5 +1,5 @@
 .career-carousel {
-  --card-width: 16rem;
+  --card-width: 18rem;
 
   margin-top: 3rem;
   padding-left: 0.5rem;
@@ -32,7 +32,7 @@
   box-shadow: #3c465040 0 2px 12px 0;
   margin: 1.5rem 0.5rem;
   padding: 1rem;
-  width: var(--card-width);
+  width: 16rem;
   transition: all 0.15s ease-in-out;
 }
 
@@ -57,9 +57,9 @@
 }
 
 .career-carousel .career-card picture img {
+  margin-left: 2.75rem;
   height: 9.5625rem;
   width: 8.75rem;
-  padding-inline: 2.8rem;
 }
 
 .career-carousel .career-card blockquote {
@@ -157,7 +157,11 @@
 
 @media (min-width: 77rem) {
   .career-slider {
-    width: calc(((var(--card-width) + 3rem) * 4));
+    width: calc(((var(--card-width) + 1rem) * 4));
+  }
+
+  .career-carousel .career-card {
+    width: var(--card-width);
   }
 
   .career-carousel .career-card blockquote {
@@ -171,6 +175,7 @@
   }
 
   .career-carousel .career-card picture img {
+    margin-left: unset;
     height: 16rem;
     width: 14.375rem;
     padding-inline: 0;
@@ -179,4 +184,4 @@
   .career-carousel .career-slides-navbar {
     display: flex;
   }
-}
\ No newline at end of file
+}
diff --git a/blocks/career-carousel/career-carousel.js b/blocks/career-carousel/career-carousel.js
index 3fed7e6f..7b2e78ec 100644
--- a/blocks/career-carousel/career-carousel.js
+++ b/blocks/career-carousel/career-carousel.js
@@ -87,7 +87,7 @@ export default async function decorate(block) {
     const link = document.createElement('button');
     link.textContent = placeholders['career-carousel-readmore'];
     const arrow = document.createElement('img');
-    arrow.src = '/icons/angle-right-blue.svg';
+    arrow.src = '/icons/angle-right-blue-bg.svg';
     arrow.alt = 'Go to testimonial';
     arrow.classList.add('icon-angle-right-blue');
     link.append(arrow);
@@ -124,7 +124,7 @@ export default async function decorate(block) {
   navButtons.prepend(la);
 
   const ra = document.createElement('img');
-  ra.src = '/icons/angle-right-blue.svg';
+  ra.src = '/icons/angle-right-blue-bg.svg';
   ra.alt = 'Next person card';
   ra.classList.add('btn-angle');
   ra.onclick = () => scrollToAdjacent(buttons, slideDivs, careerSlides, true, document);