Solutions Block #63

blocks/v2-columns/v2-columns.css

@@ -33,13 +33,6 @@
   padding: 40px 0;
 }
 
-.v2-columns__column--with-text .v2-columns__pretitle {
-  font-family: var(--ff-accents-regular);
-  font-size: var(--accent-2-font-size);
-  line-height: var(--accent-2-line-height);
-  margin: 0;
-}
-
 .v2-columns__column--with-text .v2-columns__heading {
   margin: 12px 0;
 }
@@ -51,7 +44,7 @@
 
 .v2-columns__column--with-text a.button {
   width: fit-content;
-  margin: 0;
+  margin-top: 12px;
 }
 
 .v2-columns__column--with-text a.button:not(a.button:first-of-type) {
@@ -124,7 +117,8 @@
   }
 
   .v2-columns__column--with-text .v2-columns__heading {
-    margin: 0;
+    margin: 24px 0 12px;
+    font-size: var(--headline-1-font-size);
   }
 
   .v2-columns__column--with-text .v2-columns__body {

blocks/v2-columns/v2-columns.js

@@ -59,7 +59,7 @@ export default async function decorate(block) {
     const pretitleText = prevEl && !prevEl.classList.contains('icon') && prevEl.textContent;
 
     if (pretitleText) {
-      const pretitle = createElement('span', { classes: `${blockName}__pretitle` });
+      const pretitle = createElement('span', { classes: 'pretitle' });
       pretitle.textContent = pretitleText;
       prevEl.replaceWith(pretitle);
     }

blocks/v2-solutions/v2-solutions.css

@@ -0,0 +1,50 @@
+.v2-solutions-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.v2-solutions-wrapper {
+  flex-basis: 33.33%;
+}
+
+.v2-solutions-container.v2-cards-container {
+  max-width: var(--wrapper-width);
+  margin: auto;
+}
+
+.v2-solutions-container.v2-cards-container .v2-cards-wrapper {
+  flex-basis: 66.66%;
+}
+
+.v2-solutions-container.v2-cards-container .v2-cards__card-item {
+  width: 100%;
+}
+
+.v2-solutions h1 {
+  font: normal var(--headline-1-font-size)/1.15 var(--ff-headline-medium);
+  margin-top: 12px;
+}
+
+.v2-solutions h1 + p {
+  font: normal var(--body-font-size-s)/1.5 var(--ff-body);
+}
+
+@media (min-width: 744px) {
+  .v2-solutions-container {
+    flex-direction: row;
+  }
+
+  .v2-solutions-container.v2-cards-container .v2-cards__card-item {
+    max-width: calc((100% - 48px) / 2);
+  }
+}
+
+@media (min-width: 1200px) {
+  .v2-solutions {
+    padding-right: 16px;
+  }
+
+  .v2-solutions h1 {
+    font-size: var(--headline-1-font-size);
+  }
+}

blocks/v2-solutions/v2-solutions.js

@@ -0,0 +1,6 @@
+import { adjustPretitle } from '../../scripts/common.js';
+
+export default function decorate(block) {
+  const content = block.querySelector(':scope > div > div');
+  adjustPretitle(content);
+}

scripts/common.js

@@ -189,3 +189,24 @@ export function debounce(func, timeout = 200) {
     timer = setTimeout(() => { func.apply(this, args); }, timeout);
   };
 }
+
+export const adjustPretitle = (element) => {
+  const headingSelector = 'h1, h2, h3, h4, h5, h6';
+
+  [...element.querySelectorAll(headingSelector)].forEach((heading) => {
+    const isNextElHeading = heading.nextElementSibling?.matches(headingSelector);
+    if (!isNextElHeading) {
+      return;
+    }
+
+    const currentLevel = Number(heading.tagName[1]);
+    const nextElLevel = Number(heading.nextElementSibling.tagName[1]);
+
+    if (currentLevel > nextElLevel) {
+      const pretitle = createElement('span', { classes: ['pretitle'] });
+      pretitle.append(...heading.childNodes);
+
+      heading.replaceWith(pretitle);
+    }
+  });
+};

styles/styles.css

@@ -911,7 +911,7 @@ main .section.responsive-title h1 {
 
 /* REDESIGN Buttons */
 /* stylelint-disable-next-line no-descending-specificity */
-.redesign-v2 a.button:any-link, 
+.redesign-v2 a.button:any-link,
 .redesign-v2 button {
   font-weight: normal;
 }
@@ -1086,6 +1086,9 @@ main .section.responsive-title h1 {
   }
 }
 
+.redesign-v2 .pretitle {
+  font: normal var(--accent-2-font-size)/1.2 var(--ff-accents);
+}
 
 /* CLS OPTIMIZATION */
 .v2-hero {