From 3dc6e606e1ff4cf3555ac0e8944be72c920a9f23 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Fri, 19 Jan 2024 11:05:57 +0100
Subject: [PATCH 01/16] v1 accordion-column block with left variant

---
 .../v2-accordion-column.css                   | 152 ++++++++++++++++++
 .../v2-accordion-column.js                    |  79 +++++++++
 2 files changed, 231 insertions(+)
 create mode 100644 blocks/v2-accordion-column/v2-accordion-column.css
 create mode 100644 blocks/v2-accordion-column/v2-accordion-column.js

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
new file mode 100644
index 000000000..bf8d5dfe7
--- /dev/null
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -0,0 +1,152 @@
+.v2-accordion-column__item-header-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--c-primary-black);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin: 0;
+  padding: 1em 0;
+  text-align: left;
+  width: 100%;
+}
+
+.v2-accordion-column__item-header-button:hover,
+.v2-accordion-column__item-header-button:focus {
+  background: transparent;
+  cursor: pointer;
+}
+
+.v2-accordion-column__item-title {
+  font-family: var(--ff-headline-medium);
+  font-size: var(--headline-1-font-size);
+  letter-spacing: var(--headline-1-letter-spacing);
+  line-height: var(--headline-1-line-height);
+  margin: 0;
+}
+
+.v2-accordion-column__close {
+  transform: rotate(180deg);
+  transition: transform var(--duration-small) var(--easing-standard);
+}
+
+.v2-accordion-column__item .icon svg {
+  height: 24px;
+  width: 24px;
+}
+
+.v2-accordion-column__item .icon svg,
+.v2-accordion-column__item a .icon svg {
+  display: flex;
+}
+
+.v2-accordion-column__item a .icon svg {
+  height: 16px;
+  width: 16px;
+  stroke: currentcolor;
+}
+
+.v2-accordion-column__item.active .v2-accordion-column__close {
+  transform: rotate(0);
+}
+
+.v2-accordion-column__item :is(
+  .v2-accordion-column__item-image,
+  .v2-accordion-column__item-description){
+  display: none;
+}
+
+.v2-accordion-column__item {
+  margin: 40px 0;
+  border-bottom: 2px solid var(--c-primary-black);
+}
+
+.v2-accordion-column__item.active {
+  display: flex;
+  flex-direction: column;
+}
+
+.v2-accordion-column__item.active :is(
+  .v2-accordion-column__item-image,
+  .v2-accordion-column__item-description) {
+  display: initial;
+}
+
+.v2-accordion-column__item-description .button-container .button {
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  translate: none;
+}
+
+.v2-accordion-column__item-description .button-container:hover .button svg,
+.v2-accordion-column__item-description .button-container:focus-within .button svg{
+  translate: 3px;
+  transition: translate ease-out 0.2s;
+}
+
+.v2-accordion-column__item-image img {
+  aspect-ratio: 16/10;
+  width: 100%;
+  height: auto;
+}
+
+/* Left variant */
+.v2-accordion-column--left .v2-accordion-column__item-image {
+  order: 1;
+}
+
+.v2-accordion-column--left .v2-accordion-column__item-description {
+  order: 2;
+}
+
+@media (min-width: 1200px) {
+  .v2-accordion-column__accordion-container {
+    display: flex;
+    width: 100vw;
+    max-width: 1440px;
+    position: relative;
+    left: 50%;
+    translate: -49.5%;
+    margin-top: 5em;
+  }
+
+  .v2-accordion-column__accordion-gap {
+    width: 50%;
+    height: 500px;
+  }
+
+  .v2-accordion-column__items-container {
+    width: 50%;
+    padding: 0 5em;
+  }
+
+  .v2-accordion-column__item-image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 50%;
+  }
+
+  .v2-accordion-column__item-title {
+    font-size: var(--body-font-size-xl);
+  }
+
+  /* Left variant */
+  .v2-accordion-column--left .v2-accordion-column__accordion-gap {
+    order: 2;
+  }
+
+  .v2-accordion-column--left .v2-accordion-column__items-container {
+    order: 1;
+  }
+
+  .v2-accordion-column--left .v2-accordion-column__item-image {
+    left: 50%;
+  }
+}
diff --git a/blocks/v2-accordion-column/v2-accordion-column.js b/blocks/v2-accordion-column/v2-accordion-column.js
new file mode 100644
index 000000000..0556dc81f
--- /dev/null
+++ b/blocks/v2-accordion-column/v2-accordion-column.js
@@ -0,0 +1,79 @@
+import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
+
+const CLASSES = {
+  blockName: 'v2-accordion-column',
+  grayBackground: 'gray-background',
+  left: 'left',
+};
+
+const { blockName, left, grayBackground } = CLASSES;
+const variants = Object.values(CLASSES).splice(1);
+
+const addAccordionClass = (item) => {
+  const hasPicture = item.querySelector('picture');
+  if (hasPicture) item.classList.add(`${blockName}__item-image`);
+  else {
+    const header = item.querySelector(':is(h1, h2, h3, h4, h5, h6)');
+    if (header) header.classList.add(`${blockName}__item-title`);
+    item.classList.add(`${blockName}__item-description`);
+  }
+};
+
+export default function decorate(block) {
+  const header = block.querySelector(':scope > div:first-child > div > :first-child');
+  const accordionItems = [...block.querySelectorAll(':scope > div:not(:first-child)')];
+  const accordionContainer = createElement('div', { classes: `${blockName}__accordion-container` });
+  const colGap = createElement('div', { classes: `${blockName}__accordion-gap` });
+  const itemsContainer = createElement('div', { classes: `${blockName}__items-container` });
+  const hasLeftClass = block.classList.contains(left); // accordion at left side
+  const hasGrayBgClass = block.classList.contains(grayBackground); // accordion with gray background
+  /** @type {boolean} */
+  const isLeftVariant = hasLeftClass
+    || (!hasLeftClass && !!accordionItems[0].lastElementChild.querySelector('picture'));
+  // remove the gray variant and add it as section class
+  if (hasGrayBgClass) {
+    const section = 'section';
+    const sectionEl = block.closest(`.${section}`);
+    block.classList.remove(grayBackground);
+    sectionEl.classList.add(grayBackground);
+    variantsClassesToBEM(sectionEl.classList, variants, section);
+  }
+  if (!hasLeftClass && isLeftVariant) block.classList.add(left);
+  variantsClassesToBEM(block.classList, variants, blockName);
+  header.parentElement.classList.add(`${blockName}__header-wrapper`);
+  header.parentElement.parentElement.classList.add(`${blockName}__header-container`);
+
+  // style the header as an h2 with red marker over it
+  header.classList.remove('h1', 'h2', 'h3', 'h4', 'h5', 'h6');
+  header.classList.add(`${blockName}__header`, 'h2', 'with-marker');
+
+  // is responsibility of the author to add the proper amount of images and text
+  accordionItems.forEach((item, i) => {
+    const colBtnTitle = createElement('button', {
+      classes: `${blockName}__item-header-button`,
+      props: { type: 'button' },
+    });
+    const arrowEl = createElement('div', { classes: [`${blockName}__close`, 'icon'] });
+    const dropdownArrowIcon = document.createRange().createContextualFragment(`
+      <svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-dropdown-caret"></use></svg>`);
+    const colItems = [...item.querySelectorAll(':scope > div')];
+
+    // add the proper classes to each accordion item
+    item.classList.add(`${blockName}__item`);
+    if (i === 0) item.classList.add('active');
+    colItems.forEach((col) => addAccordionClass(col));
+    arrowEl.appendChild(...dropdownArrowIcon.children);
+    colBtnTitle.prepend(item.querySelector(`.${blockName}__item-title`), arrowEl);
+    colBtnTitle.onclick = () => {
+      const active = accordionContainer.querySelector('.active');
+      if (active && active !== item) active.classList.remove('active');
+      item.classList.toggle('active');
+    };
+    item.prepend(colGap, colBtnTitle);
+    itemsContainer.appendChild(item);
+  });
+
+  accordionContainer.append(colGap, itemsContainer);
+
+  block.appendChild(accordionContainer);
+}

From 68c1c2eb36a91d78f878610682f040cbb8d0715a Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Fri, 19 Jan 2024 15:30:02 +0100
Subject: [PATCH 02/16] Fix design margins/paddings

---
 .../v2-accordion-column.css                   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index bf8d5dfe7..b10b0e6be 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -1,15 +1,14 @@
 .v2-accordion-column__item-header-button {
-  align-items: center;
   background: transparent;
   border: 0;
   color: var(--c-primary-black);
   display: flex;
-  flex-wrap: nowrap;
   justify-content: space-between;
   margin: 0;
-  padding: 1em 0;
+  padding: 0 0 1em;
   text-align: left;
   width: 100%;
+  height: 42px;
 }
 
 .v2-accordion-column__item-header-button:hover,
@@ -19,7 +18,7 @@
 }
 
 .v2-accordion-column__item-title {
-  font-family: var(--ff-headline-medium);
+  font-family: var(--ff-subheadings-medium);
   font-size: var(--headline-1-font-size);
   letter-spacing: var(--headline-1-letter-spacing);
   line-height: var(--headline-1-line-height);
@@ -58,11 +57,12 @@
 }
 
 .v2-accordion-column__item {
-  margin: 40px 0;
+  margin: 0 0 16px;
   border-bottom: 2px solid var(--c-primary-black);
 }
 
 .v2-accordion-column__item.active {
+  margin: 40px 0;
   display: flex;
   flex-direction: column;
 }
@@ -84,6 +84,10 @@
   translate: none;
 }
 
+.v2-accordion-column__item-description p {
+  margin-bottom: 24px;
+}
+
 .v2-accordion-column__item-description .button-container:hover .button svg,
 .v2-accordion-column__item-description .button-container:focus-within .button svg{
   translate: 3px;
@@ -94,6 +98,7 @@
   aspect-ratio: 16/10;
   width: 100%;
   height: auto;
+  display: block;
 }
 
 /* Left variant */
@@ -121,6 +126,10 @@
     height: 500px;
   }
 
+  .v2-accordion-column__item.active {
+    margin: 0 0 16px;
+  }
+
   .v2-accordion-column__items-container {
     width: 50%;
     padding: 0 5em;

From 90fb3de019c1d7e9cb651d4b4c0ef22298ad3bb7 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Fri, 19 Jan 2024 17:00:13 +0100
Subject: [PATCH 03/16] add a img placeholder & other style updates

---
 .../v2-accordion-column/v2-accordion-column.css |  8 +++++++-
 .../v2-accordion-column/v2-accordion-column.js  | 17 ++++-------------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index b10b0e6be..3efad0405 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -18,7 +18,7 @@
 }
 
 .v2-accordion-column__item-title {
-  font-family: var(--ff-subheadings-medium);
+  font-family: var(--ff-headline-medium);
   font-size: var(--headline-1-font-size);
   letter-spacing: var(--headline-1-letter-spacing);
   line-height: var(--headline-1-line-height);
@@ -104,6 +104,7 @@
 /* Left variant */
 .v2-accordion-column--left .v2-accordion-column__item-image {
   order: 1;
+  background-color: var(--c-primary-gray);
 }
 
 .v2-accordion-column--left .v2-accordion-column__item-description {
@@ -126,6 +127,11 @@
     height: 500px;
   }
 
+  .v2-accordion-column__accordion-gap.all-closed {
+    background-color: var(--c-primary-gray);
+    height: 400px;
+  }
+
   .v2-accordion-column__item.active {
     margin: 0 0 16px;
   }
diff --git a/blocks/v2-accordion-column/v2-accordion-column.js b/blocks/v2-accordion-column/v2-accordion-column.js
index 0556dc81f..b63715474 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.js
+++ b/blocks/v2-accordion-column/v2-accordion-column.js
@@ -2,11 +2,10 @@ import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
 
 const CLASSES = {
   blockName: 'v2-accordion-column',
-  grayBackground: 'gray-background',
   left: 'left',
 };
 
-const { blockName, left, grayBackground } = CLASSES;
+const { blockName, left } = CLASSES;
 const variants = Object.values(CLASSES).splice(1);
 
 const addAccordionClass = (item) => {
@@ -26,26 +25,16 @@ export default function decorate(block) {
   const colGap = createElement('div', { classes: `${blockName}__accordion-gap` });
   const itemsContainer = createElement('div', { classes: `${blockName}__items-container` });
   const hasLeftClass = block.classList.contains(left); // accordion at left side
-  const hasGrayBgClass = block.classList.contains(grayBackground); // accordion with gray background
   /** @type {boolean} */
   const isLeftVariant = hasLeftClass
     || (!hasLeftClass && !!accordionItems[0].lastElementChild.querySelector('picture'));
-  // remove the gray variant and add it as section class
-  if (hasGrayBgClass) {
-    const section = 'section';
-    const sectionEl = block.closest(`.${section}`);
-    block.classList.remove(grayBackground);
-    sectionEl.classList.add(grayBackground);
-    variantsClassesToBEM(sectionEl.classList, variants, section);
-  }
   if (!hasLeftClass && isLeftVariant) block.classList.add(left);
   variantsClassesToBEM(block.classList, variants, blockName);
   header.parentElement.classList.add(`${blockName}__header-wrapper`);
   header.parentElement.parentElement.classList.add(`${blockName}__header-container`);
 
   // style the header as an h2 with red marker over it
-  header.classList.remove('h1', 'h2', 'h3', 'h4', 'h5', 'h6');
-  header.classList.add(`${blockName}__header`, 'h2', 'with-marker');
+  header.classList.add(`${blockName}__header`, 'with-marker');
 
   // is responsibility of the author to add the proper amount of images and text
   accordionItems.forEach((item, i) => {
@@ -66,8 +55,10 @@ export default function decorate(block) {
     colBtnTitle.prepend(item.querySelector(`.${blockName}__item-title`), arrowEl);
     colBtnTitle.onclick = () => {
       const active = accordionContainer.querySelector('.active');
+      const gapEl = accordionContainer.querySelector(`.${blockName}__accordion-gap`);
       if (active && active !== item) active.classList.remove('active');
       item.classList.toggle('active');
+      gapEl.classList.toggle('all-closed', !accordionContainer.querySelector('.active'));
     };
     item.prepend(colGap, colBtnTitle);
     itemsContainer.appendChild(item);

From 6738ee853f0870bab2aa9b5cd9397f1c6b6d1e40 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Mon, 22 Jan 2024 16:36:15 +0100
Subject: [PATCH 04/16] 1 accordion item is always active

---
 blocks/v2-accordion-column/v2-accordion-column.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.js b/blocks/v2-accordion-column/v2-accordion-column.js
index b63715474..10929b1a7 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.js
+++ b/blocks/v2-accordion-column/v2-accordion-column.js
@@ -55,10 +55,8 @@ export default function decorate(block) {
     colBtnTitle.prepend(item.querySelector(`.${blockName}__item-title`), arrowEl);
     colBtnTitle.onclick = () => {
       const active = accordionContainer.querySelector('.active');
-      const gapEl = accordionContainer.querySelector(`.${blockName}__accordion-gap`);
       if (active && active !== item) active.classList.remove('active');
-      item.classList.toggle('active');
-      gapEl.classList.toggle('all-closed', !accordionContainer.querySelector('.active'));
+      item.classList.add('active');
     };
     item.prepend(colGap, colBtnTitle);
     itemsContainer.appendChild(item);

From 4ef37f5cc46ba61d73a923db5ef47c8d6a61c10c Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Tue, 23 Jan 2024 18:58:43 +0100
Subject: [PATCH 05/16] Fix some style issues

---
 .../v2-accordion-column.css                   | 80 ++++++++++++-------
 .../v2-accordion-column.js                    |  6 +-
 2 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 3efad0405..ef3c92951 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -1,3 +1,11 @@
+.section > .v2-accordion-column-wrapper.full-width {
+  padding: 0 16px;
+}
+
+.v2-accordion-column__header-container h2 {
+  font-family: var(--ff-headline-medium);
+}
+
 .v2-accordion-column__item-header-button {
   background: transparent;
   border: 0;
@@ -5,10 +13,8 @@
   display: flex;
   justify-content: space-between;
   margin: 0;
-  padding: 0 0 1em;
-  text-align: left;
+  padding: 0 0 8px;
   width: 100%;
-  height: 42px;
 }
 
 .v2-accordion-column__item-header-button:hover,
@@ -18,7 +24,7 @@
 }
 
 .v2-accordion-column__item-title {
-  font-family: var(--ff-headline-medium);
+  font-family: var(--ff-subheadings-medium);
   font-size: var(--headline-1-font-size);
   letter-spacing: var(--headline-1-letter-spacing);
   line-height: var(--headline-1-line-height);
@@ -84,8 +90,13 @@
   translate: none;
 }
 
-.v2-accordion-column__item-description p {
-  margin-bottom: 24px;
+.v2-accordion-column__item-description {
+  padding: 0 0 24px;
+}
+
+.v2-accordion-column__item-description > p {
+  margin: 0;
+  padding: 16px 0 0;
 }
 
 .v2-accordion-column__item-description .button-container:hover .button svg,
@@ -112,53 +123,66 @@
 }
 
 @media (min-width: 1200px) {
+  .section.v2-accordion-column-container {
+    height: 780px;
+  }
+
+  .section > .v2-accordion-column-wrapper.full-width {
+    padding: 0;
+    max-width: 1425px;
+    margin: 0 auto;
+    position: relative;
+  }
+
   .v2-accordion-column__accordion-container {
     display: flex;
-    width: 100vw;
-    max-width: 1440px;
-    position: relative;
-    left: 50%;
-    translate: -49.5%;
-    margin-top: 5em;
+    justify-content: end;
   }
 
-  .v2-accordion-column__accordion-gap {
-    width: 50%;
-    height: 500px;
+  .v2-accordion-column__header-container {
+    max-width: 1040px;
+    margin: 0 auto 4em;
   }
 
-  .v2-accordion-column__accordion-gap.all-closed {
-    background-color: var(--c-primary-gray);
-    height: 400px;
+  .v2-accordion-column__items-container {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
   }
 
-  .v2-accordion-column__item.active {
-    margin: 0 0 16px;
+  .v2-accordion-column__item {
+    max-width: 343px;
+    width: 100%;
   }
 
-  .v2-accordion-column__items-container {
-    width: 50%;
-    padding: 0 5em;
+  .v2-accordion-column__item.active {
+    margin: 0 0 16px;
   }
 
   .v2-accordion-column__item-image {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 6em;
     width: 50%;
+    background-color: var(--c-primary-gray);
   }
 
   .v2-accordion-column__item-title {
     font-size: var(--body-font-size-xl);
   }
 
-  /* Left variant */
-  .v2-accordion-column--left .v2-accordion-column__accordion-gap {
-    order: 2;
+  .v2-accordion-column__item-description > p:not(.button-container) {
+    padding: 0;
   }
 
+  /* Left variant */
   .v2-accordion-column--left .v2-accordion-column__items-container {
-    order: 1;
+    align-items: flex-end;
+  }
+
+  .v2-accordion-column--left .v2-accordion-column__accordion-container {
+    justify-content: start;
   }
 
   .v2-accordion-column--left .v2-accordion-column__item-image {
diff --git a/blocks/v2-accordion-column/v2-accordion-column.js b/blocks/v2-accordion-column/v2-accordion-column.js
index 10929b1a7..bb4259115 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.js
+++ b/blocks/v2-accordion-column/v2-accordion-column.js
@@ -22,7 +22,6 @@ export default function decorate(block) {
   const header = block.querySelector(':scope > div:first-child > div > :first-child');
   const accordionItems = [...block.querySelectorAll(':scope > div:not(:first-child)')];
   const accordionContainer = createElement('div', { classes: `${blockName}__accordion-container` });
-  const colGap = createElement('div', { classes: `${blockName}__accordion-gap` });
   const itemsContainer = createElement('div', { classes: `${blockName}__items-container` });
   const hasLeftClass = block.classList.contains(left); // accordion at left side
   /** @type {boolean} */
@@ -30,6 +29,7 @@ export default function decorate(block) {
     || (!hasLeftClass && !!accordionItems[0].lastElementChild.querySelector('picture'));
   if (!hasLeftClass && isLeftVariant) block.classList.add(left);
   variantsClassesToBEM(block.classList, variants, blockName);
+  block.parentElement.classList.add('full-width');
   header.parentElement.classList.add(`${blockName}__header-wrapper`);
   header.parentElement.parentElement.classList.add(`${blockName}__header-container`);
 
@@ -58,11 +58,11 @@ export default function decorate(block) {
       if (active && active !== item) active.classList.remove('active');
       item.classList.add('active');
     };
-    item.prepend(colGap, colBtnTitle);
+    item.prepend(colBtnTitle);
     itemsContainer.appendChild(item);
   });
 
-  accordionContainer.append(colGap, itemsContainer);
+  accordionContainer.append(itemsContainer);
 
   block.appendChild(accordionContainer);
 }

From 307d1543973919482b2b96354606d905386cd338 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:50:25 +0100
Subject: [PATCH 06/16] image background if img is still loading

---
 blocks/v2-accordion-column/v2-accordion-column.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index ef3c92951..f1af499db 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -105,6 +105,10 @@
   transition: translate ease-out 0.2s;
 }
 
+.v2-accordion-column__item-image {
+  background-color: var(--c-primary-gray);
+}
+
 .v2-accordion-column__item-image img {
   aspect-ratio: 16/10;
   width: 100%;
@@ -115,7 +119,6 @@
 /* Left variant */
 .v2-accordion-column--left .v2-accordion-column__item-image {
   order: 1;
-  background-color: var(--c-primary-gray);
 }
 
 .v2-accordion-column--left .v2-accordion-column__item-description {

From 118f723e823564560b57ec5e3a8beda2fb8d6089 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Wed, 24 Jan 2024 14:40:37 +0100
Subject: [PATCH 07/16] mobile 40px margin over accordion items

---
 blocks/v2-accordion-column/v2-accordion-column.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index f1af499db..b260095e9 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -2,6 +2,10 @@
   padding: 0 16px;
 }
 
+.v2-accordion-column__items-container {
+  margin: 40px 0 0;
+}
+
 .v2-accordion-column__header-container h2 {
   font-family: var(--ff-headline-medium);
 }
@@ -152,6 +156,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    margin: 0;
   }
 
   .v2-accordion-column__item {

From cd182c650064ebaaf8634664d54a2837e93a9b64 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Wed, 24 Jan 2024 14:47:21 +0100
Subject: [PATCH 08/16] item titles size & underline update

---
 blocks/v2-accordion-column/v2-accordion-column.css | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index b260095e9..292f5db2f 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -29,7 +29,7 @@
 
 .v2-accordion-column__item-title {
   font-family: var(--ff-subheadings-medium);
-  font-size: var(--headline-1-font-size);
+  font-size: var(--body-font-size-xl);
   letter-spacing: var(--headline-1-letter-spacing);
   line-height: var(--headline-1-line-height);
   margin: 0;
@@ -68,7 +68,7 @@
 
 .v2-accordion-column__item {
   margin: 0 0 16px;
-  border-bottom: 2px solid var(--c-primary-black);
+  border-bottom: 1px solid var(--c-secondary-steel);
 }
 
 .v2-accordion-column__item.active {
@@ -176,10 +176,6 @@
     background-color: var(--c-primary-gray);
   }
 
-  .v2-accordion-column__item-title {
-    font-size: var(--body-font-size-xl);
-  }
-
   .v2-accordion-column__item-description > p:not(.button-container) {
     padding: 0;
   }

From 3107137837bff81544e67fe1b077cbd6a66092ba Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Fri, 26 Jan 2024 14:49:54 +0100
Subject: [PATCH 09/16] 114 item-title use the redesign header font size

---
 blocks/v2-accordion-column/v2-accordion-column.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 292f5db2f..776f33257 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -29,7 +29,6 @@
 
 .v2-accordion-column__item-title {
   font-family: var(--ff-subheadings-medium);
-  font-size: var(--body-font-size-xl);
   letter-spacing: var(--headline-1-letter-spacing);
   line-height: var(--headline-1-line-height);
   margin: 0;

From a3415d3feac726a04aa79386a797e43a7bfa5d09 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Thu, 8 Feb 2024 09:14:53 +0100
Subject: [PATCH 10/16] All changes less the use of grid

---
 .../v2-accordion-column/v2-accordion-column.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 776f33257..562d439db 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -128,26 +128,27 @@
   order: 2;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1024px) {
   .section.v2-accordion-column-container {
     height: 780px;
   }
 
   .section > .v2-accordion-column-wrapper.full-width {
-    padding: 0;
-    max-width: 1425px;
+    max-width: 1440px;
     margin: 0 auto;
     position: relative;
   }
 
+  .v2-accordion-column__header-container {
+    max-width: var(--wrapper-width);
+    margin: 0 auto 4em;
+  }
+
   .v2-accordion-column__accordion-container {
     display: flex;
     justify-content: end;
-  }
-
-  .v2-accordion-column__header-container {
-    max-width: 1040px;
-    margin: 0 auto 4em;
+    max-width: var(--wrapper-width);
+    margin: 0 auto;
   }
 
   .v2-accordion-column__items-container {

From 85bed9fbfc0a61bbfb0b042a2029cf343b2f7b50 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Thu, 8 Feb 2024 15:28:21 +0100
Subject: [PATCH 11/16] minimum fix for left variant alignment

---
 blocks/v2-accordion-column/v2-accordion-column.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 562d439db..59df1442b 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -181,10 +181,6 @@
   }
 
   /* Left variant */
-  .v2-accordion-column--left .v2-accordion-column__items-container {
-    align-items: flex-end;
-  }
-
   .v2-accordion-column--left .v2-accordion-column__accordion-container {
     justify-content: start;
   }

From ec6f1d1a589e2c10e8889f874eaf5cc88457e9be Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Thu, 8 Feb 2024 16:04:06 +0100
Subject: [PATCH 12/16] alignments with testimonial overlap size

---
 blocks/v2-accordion-column/v2-accordion-column.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 59df1442b..73ada6515 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -152,7 +152,6 @@
   }
 
   .v2-accordion-column__items-container {
-    width: 40%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -172,7 +171,7 @@
     position: absolute;
     left: 0;
     top: 6em;
-    width: 50%;
+    width: calc(50% + 80px);
     background-color: var(--c-primary-gray);
   }
 
@@ -185,7 +184,11 @@
     justify-content: start;
   }
 
+  .v2-accordion-column--left .v2-accordion-column__items-container {
+    width: 40%;
+  }
+
   .v2-accordion-column--left .v2-accordion-column__item-image {
-    left: 50%;
+    left: calc(50% - 80px);
   }
 }

From a7407eb8173aafdb5cf25b7845eb216451f6bda5 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:58:39 +0100
Subject: [PATCH 13/16] update accordion titles font size to match the h4 size

---
 blocks/v2-accordion-column/v2-accordion-column.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 73ada6515..cc3ab8778 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -29,6 +29,7 @@
 
 .v2-accordion-column__item-title {
   font-family: var(--ff-subheadings-medium);
+  font-size: var(--headline-4-font-size);
   letter-spacing: var(--headline-1-letter-spacing);
   line-height: var(--headline-1-line-height);
   margin: 0;

From 760721d9b4038c22f44e6f88a741ec25e4e24c10 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:21:27 +0100
Subject: [PATCH 14/16] Flip rotation states to the dropdown caret icon

---
 blocks/v2-accordion-column/v2-accordion-column.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index cc3ab8778..73e946fce 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -36,7 +36,7 @@
 }
 
 .v2-accordion-column__close {
-  transform: rotate(180deg);
+  transform: rotate(0);
   transition: transform var(--duration-small) var(--easing-standard);
 }
 
@@ -57,7 +57,8 @@
 }
 
 .v2-accordion-column__item.active .v2-accordion-column__close {
-  transform: rotate(0);
+  transform: rotate(180deg);
+  transition: transform var(--duration-small) var(--easing-standard);
 }
 
 .v2-accordion-column__item :is(

From 68e8d38ff912717050e318abc603d89e43d7533f Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:30:59 +0100
Subject: [PATCH 15/16] title size to 45px

---
 blocks/v2-accordion-column/v2-accordion-column.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 73e946fce..38743a8cf 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -8,6 +8,7 @@
 
 .v2-accordion-column__header-container h2 {
   font-family: var(--ff-headline-medium);
+  font-size: var(--headline-1-font-size);
 }
 
 .v2-accordion-column__item-header-button {

From c52792939af3f7d9a5bc1de579534801ec27a3b3 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Wed, 14 Feb 2024 17:03:59 +0100
Subject: [PATCH 16/16] padding/margin update following the design

---
 blocks/v2-accordion-column/v2-accordion-column.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/blocks/v2-accordion-column/v2-accordion-column.css b/blocks/v2-accordion-column/v2-accordion-column.css
index 38743a8cf..578eaabfa 100644
--- a/blocks/v2-accordion-column/v2-accordion-column.css
+++ b/blocks/v2-accordion-column/v2-accordion-column.css
@@ -8,7 +8,6 @@
 
 .v2-accordion-column__header-container h2 {
   font-family: var(--ff-headline-medium);
-  font-size: var(--headline-1-font-size);
 }
 
 .v2-accordion-column__item-header-button {
@@ -28,6 +27,10 @@
   cursor: pointer;
 }
 
+.v2-accordion-column__item:not(.active) .v2-accordion-column__item-header-button {
+  padding: 0 0 12px;
+}
+
 .v2-accordion-column__item-title {
   font-family: var(--ff-subheadings-medium);
   font-size: var(--headline-4-font-size);
@@ -147,6 +150,10 @@
     margin: 0 auto 4em;
   }
 
+  .v2-accordion-column__header-container h2 {
+    font-size: var(--headline-1-font-size);
+  }
+
   .v2-accordion-column__accordion-container {
     display: flex;
     justify-content: end;
@@ -166,8 +173,9 @@
     width: 100%;
   }
 
+  .v2-accordion-column__item,
   .v2-accordion-column__item.active {
-    margin: 0 0 16px;
+    margin: 0 0 20px;
   }
 
   .v2-accordion-column__item-image {