23 card block

blocks/v2-cards/v2-cards.css

@@ -0,0 +1,87 @@
+main .section.v2-cards-container .v2-cards-wrapper {
+  padding: 0;
+}
+
+.v2-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px;
+  justify-content: center;
+  max-width: 1040px;
+  margin: auto;
+}
+
+.v2-cards__card-item {
+  background: var(--c-primary-white);
+  color: var(--c-primary-black);
+}
+
+.v2-cards__picture-wrapper {
+  padding: 0;
+}
+
+.v2-cards__text-wrapper {
+  padding: 24px;
+}
+
+.v2-cards__picture {
+  display: flex;
+}
+
+.v2-cards__image {
+  background: #e9eaec;
+  height: 193px;
+  width: 100%;
+  object-fit: cover;
+}
+
+.v2-cards__heading {
+  font-family: var(--ff-subheadings-medium);
+  font-size: var(--headline-5-font-size);
+  line-height: var(--headline-5-line-height);
+  margin: 0 0 7px;
+}
+
+.v2-cards__text-wrapper p {
+  margin: 0;
+  color: var(--c-primary-black);
+  font-family: var(--ff-body);
+  font-size: var(--body-1-font-size);
+  font-style: normal;
+  line-height: var(--body-1-line-height);
+  letter-spacing: 0.16px;
+}
+
+.v2-cards__text-wrapper .v2-cards__button-container {
+  margin-top: 16px;
+}
+
+.v2-cards__button-container .v2-cards__button:any-link {
+  color: var(--c-primary-black);
+  font-family: var(--ff-subheadings-medium);
+  font-size: var(--button-font-size);
+  font-style: normal;
+  line-height: var(--button-line-height);
+  letter-spacing: 1.12px;
+  display: inline-flex;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  justify-content: left;
+}
+
+@media (min-width: 740px) {
+  .v2-cards {
+    flex-flow: row wrap;
+    gap: 16px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .v2-cards__card-item {
+    max-width: calc((100% - 32px) / 3);
+    min-width: 336px;
+  }
+}

blocks/v2-cards/v2-cards.js

@@ -0,0 +1,30 @@
+const blockClass = 'v2-cards';
+
+export default async function decorate(block) {
+  const cardsItems = [...block.querySelectorAll(':scope > div')];
+  cardsItems.forEach((el) => el.classList.add(`${blockClass}__card-item`));
+
+  const cardsSections = [...block.querySelectorAll(':scope > div > div')];
+  cardsSections.forEach((el) => {
+    el.classList.add(`${blockClass}__text-wrapper`);
+  });
+
+  const pictures = [...block.querySelectorAll('picture')];
+  pictures.forEach((el) => {
+    el.classList.add(`${blockClass}__picture`);
+    el.parentElement.classList.add(`${blockClass}__picture-wrapper`);
+    el.parentElement.classList.remove(`${blockClass}__text-wrapper`);
+  });
+
+  const images = [...block.querySelectorAll('img')];
+  images.forEach((el) => el.classList.add(`${blockClass}__image`));
+
+  const cardsHeadings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+  cardsHeadings.forEach((el) => el.classList.add(`${blockClass}__heading`));
+
+  const buttons = [...block.querySelectorAll('.button-container')];
+  buttons.forEach((el) => {
+    el.classList.add(`${blockClass}__button-container`);
+    [...el.querySelectorAll('a')].forEach((link) => link.classList.add(`${blockClass}__button`));
+  });
+}

blocks/v2-testimonial/v2-testimonial.css

@@ -59,6 +59,11 @@
   font-size: 13px;
 }
 
+.v2-testimonial__author .icon svg {
+  width: inherit;
+  height: inherit;
+}
+
 .v2-testimonial__video-link-wrapper {
   margin: 0;
   display: flex;
@@ -92,7 +97,7 @@
   height: 24px;
 }
 
-.v2-testimonial__video-link svg {
+.v2-testimonial__video-link .icon svg {
   height: 24px;
   width: 24px;
 }

styles/styles.css

@@ -104,7 +104,7 @@
 
   /* Helvetica Neue LT Pro, 65 Medium, 18px, 140%  */
   --headline-5-font-size: 1.125rem; /* 18px */
-  --headline-5-line-height: 150%;
+  --headline-5-line-height: 140%;
 
   /* Helvetica Neue LT Pro, 55 Roman / Helvetica Neue LT Pro, 75 Bold, 16px, 150%  */
   --body-1-font-size: 1rem; /* 16px */
@@ -818,6 +818,21 @@ main .section.responsive-title h1 {
   font-size: 16px;
 }
 
+.redesign-v2 .icon {
+  display: inline-flex;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.redesign-v2 .icon svg {
+  height: 1em;
+  width: 1em;
+}
+
+.redesign-v2 .section.dark-backgorund {
+  background-color: var(--c-secondary-graphite);
+  color: var(--c-primary-white);
+}
+
 /* ICONS STYLES - default on white background */
 .redesign-v2 svg path[fill] {
   fill: var(--color-icon);
@@ -954,6 +969,7 @@ main .section.responsive-title h1 {
   padding: 0;
 }
 
+.section.header-with-mark > .default-content-wrapper:first-child > h1:first-child::before,
 .redesign-v2 .with-marker::before {
   content: '';
   margin: 0;
@@ -971,8 +987,9 @@ main .section.responsive-title h1 {
   }
 
   .redesign-v2 .section > div {
-    padding: 0 200px;
+    padding: 0;
     margin: 0 auto;
+    max-width: 1040px;
   }
 
   .redesign-v2 .with-marker::before {