diff --git a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css
index 93058c57..280a2e38 100644
--- a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css
+++ b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css
@@ -31,11 +31,11 @@ main .hero-horizontal-tabs.block {
 }
 
 main div.tab-item {
-  display: none;
+  animation: fade-out 0ms linear forwards;
 }
 
 main div.tab-item.active {
-  display: block;
+  animation: fade-in 0.15s linear forwards;
 }
 
 main .hero-horiz-tabs-text {
diff --git a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js
index 1787a9da..d1d533fc 100644
--- a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js
+++ b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js
@@ -11,63 +11,7 @@
  */
 
 import { getNamedValueFromTable } from '../../scripts/scripts.js';
-
-export function createTabs(block, text) {
-  const ul = block.querySelector('ul');
-  if (!ul) return null;
-
-  const tabs = [...ul.querySelectorAll('li')].map((li) => {
-    const title = li.textContent;
-    const name = title.toLowerCase().trim();
-    return {
-      title,
-      name,
-      tabButton: li,
-    };
-  });
-
-  const panel = document.createElement('div');
-  panel.classList.add('hero-horiz-tabs-panel');
-  if (text) panel.appendChild(text);
-
-  const nav = document.createElement('nav');
-  nav.classList.add('hero-horiz-tabs-nav');
-
-  nav.replaceChildren(ul);
-  panel.appendChild(nav);
-  block.replaceChildren(panel);
-
-  // search referenced sections and move them inside the tab-container
-  const wrapper = block.parentElement;
-  const container = wrapper.parentElement;
-  const sections = document.querySelectorAll('[data-tab]');
-
-  // move the tab's sections before the tab riders.
-  [...sections].forEach((tabContent) => {
-    const name = tabContent.dataset.tab.toLowerCase().trim();
-
-    const tab = tabs.find((t) => t.name === name);
-    if (tab) {
-      const sectionWrapper = document.createElement('div');
-
-      // copy the classes from the section to the wrapper
-      [...tabContent.classList].forEach((c) => {
-        sectionWrapper.classList.add(c);
-      });
-
-      const tabDiv = document.createElement('div');
-      tabDiv.classList.add('tab-item');
-      tabDiv.append(...tabContent.children);
-      sectionWrapper.append(tabDiv);
-      container.insertBefore(sectionWrapper, wrapper);
-
-      // remove it from the dom
-      tabContent.remove();
-      tab.content = tabDiv;
-    }
-  });
-  return tabs;
-}
+import { createTabs, addTabs } from '../../scripts/blocks-utils.js';
 
 function getImage(block) {
   const div = getNamedValueFromTable(block, 'Image');
@@ -93,44 +37,7 @@ export default function decorate(block) {
   const container = wrapper.parentElement;
   container.insertBefore(wrapper, container.firstElementChild);
 
-  tabs.forEach((tab, index) => {
-    const button = document.createElement('button');
-    const { tabButton, title, name } = tab;
-    button.textContent = title.split(',');
-    button.classList.add('tab');
-
-    tabButton.replaceChildren(button);
-
-    tabButton.addEventListener('click', () => {
-      const activeButton = block.querySelector('button.active');
-
-      if (activeButton !== tabButton) {
-        activeButton.classList.remove('active');
-        // remove active class from parent li
-        activeButton.parentElement.classList.remove('active');
-        button.classList.add('active');
-        // add active class to parent li
-        tabButton.classList.add('active');
-
-        tabs.forEach((t) => {
-          if (name === t.name) {
-            t.content.classList.add('active');
-          } else {
-            t.content.classList.remove('active');
-          }
-        });
-      }
-    });
-
-    if (index === 0) {
-      button.classList.add('active');
-      // add active class to parent li
-      tabButton.classList.add('active');
-      if (tab.content) {
-        tab.content.classList.add('active');
-      }
-    }
-  });
+  addTabs(tabs, block);
 
   if (image) {
     block.append(image);
diff --git a/blocks/network-item/network-item.css b/blocks/network-item/network-item.css
index 346498fd..8da21182 100644
--- a/blocks/network-item/network-item.css
+++ b/blocks/network-item/network-item.css
@@ -155,9 +155,9 @@ div.network-item div.our-hr a::after,
 div.network-item.image div.text-content-wrapper div.website a::after,
 div.network-item.video div.text-content-wrapper div.website a::after{
     content: url("../../icons/angle-right-blue.svg");
-    position:relative;
+    position: relative;
+    top: 0.1rem;
     left: 0.3rem;
-    top: 0.5rem;
 }
 
 @media screen and (max-width: 62rem) {
diff --git a/blocks/tabs/tabs.css b/blocks/tabs/tabs.css
new file mode 100644
index 00000000..488a5288
--- /dev/null
+++ b/blocks/tabs/tabs.css
@@ -0,0 +1,81 @@
+.tabs {
+    --tabs-per-row: 3;
+}
+
+main .tabs {
+    position: relative;
+    margin-bottom: 3rem;
+    padding-left: 0;
+}
+
+main div.tab-item:not(.active) {
+    animation: fade-out 0ms linear forwards;
+
+}
+  
+main div.tab-item.active {
+    animation: fade-in 0.15s linear forwards;
+}
+
+main .tabs nav ul {
+    list-style: none;
+    display: flex;
+    text-wrap: nowrap;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--transparent-grey-light-color);
+}
+
+main .tabs nav ul li {
+    margin-bottom: 0;
+}
+
+main .tabs nav ul li button {
+    width: 6rem;
+    height: 2.5rem;
+    padding: 0.5rem 0;
+    text-align: center;
+    background-color: #f0f5f7;
+    font-weight: var(--font-weight-medium);
+    font-size: var(--body-font-size-m);
+    color: var(--transparent-grey-color-2);
+    border-radius: 0;
+    min-width: auto;
+}
+
+main .tabs nav ul li.active button {
+    color: var(--white);
+    background-color: var(--link-color);
+}
+
+main .tabs nav ul li:hover:not(.active) button {
+    background-color: #cfdfe5;
+}
+
+@media screen and (max-width: 62rem) {
+    main .tabs nav ul {
+        border-bottom: 0;
+    }
+
+    main .tabs nav ul li {
+        width: calc(100% / var(--tabs-per-row));
+        min-width: fit-content;
+    }
+
+    main .tabs nav ul li button {
+        border: 1px solid var(--transparent-grey-light-color);
+        width: 100%;
+    }
+
+    /* 3 === var(--tabs-per-row) */
+    main .tabs nav ul li:nth-child(-n+3) button {
+        border-bottom: none;
+    }
+
+    main .tabs nav ul li:nth-child(1n):not(:nth-child(3n), :last-child) button {
+        border-right: none;
+    }
+
+    main .tabs nav ul li:last-child {
+        width: calc(100% / var(--tabs-per-row) + 1px);
+    }
+}
\ No newline at end of file
diff --git a/blocks/tabs/tabs.js b/blocks/tabs/tabs.js
new file mode 100644
index 00000000..0459cbba
--- /dev/null
+++ b/blocks/tabs/tabs.js
@@ -0,0 +1,12 @@
+import { createTabs, addTabs } from '../../scripts/blocks-utils.js';
+
+export default function decorate(block) {
+  const tabs = createTabs(block);
+  const wrapper = block.parentElement;
+  const container = wrapper.parentElement;
+  container.insertBefore(wrapper, container.firstElementChild);
+
+  addTabs(tabs, block);
+
+  return block;
+}
diff --git a/scripts/blocks-utils.js b/scripts/blocks-utils.js
new file mode 100644
index 00000000..b93e60e6
--- /dev/null
+++ b/scripts/blocks-utils.js
@@ -0,0 +1,97 @@
+export function createTabs(block, text) {
+  const ul = block.querySelector('ul');
+  if (!ul) return null;
+
+  const tabs = [...ul.querySelectorAll('li')].map((li) => {
+    const title = li.textContent;
+    const name = title.toLowerCase().trim();
+    return {
+      title,
+      name,
+      tabButton: li,
+    };
+  });
+
+  const panel = document.createElement('div');
+  panel.classList.add('hero-horiz-tabs-panel');
+  if (text) panel.appendChild(text);
+
+  const nav = document.createElement('nav');
+  nav.classList.add('hero-horiz-tabs-nav');
+
+  nav.replaceChildren(ul);
+  panel.appendChild(nav);
+  block.replaceChildren(panel);
+
+  // search referenced sections and move them inside the tab-container
+  const wrapper = block.parentElement;
+  const container = wrapper.parentElement;
+  const sections = document.querySelectorAll('[data-tab]');
+
+  // move the tab's sections before the tab riders.
+  [...sections].forEach((tabContent) => {
+    const name = tabContent.dataset.tab.toLowerCase().trim();
+
+    const tab = tabs.find((t) => t.name === name);
+    if (tab) {
+      const sectionWrapper = document.createElement('div');
+
+      // copy the classes from the section to the wrapper
+      [...tabContent.classList].forEach((c) => {
+        sectionWrapper.classList.add(c);
+      });
+
+      const tabDiv = document.createElement('div');
+      tabDiv.classList.add('tab-item');
+      tabDiv.append(...tabContent.children);
+      sectionWrapper.append(tabDiv);
+      container.insertBefore(sectionWrapper, wrapper);
+
+      // remove it from the dom
+      tabContent.remove();
+      tab.content = tabDiv;
+    }
+  });
+  return tabs;
+}
+
+export function addTabs(tabs, block) {
+  tabs.forEach((tab, index) => {
+    const button = document.createElement('button');
+    const { tabButton, title, name } = tab;
+    button.textContent = title.split(',');
+    button.classList.add('tab');
+
+    tabButton.replaceChildren(button);
+
+    tabButton.addEventListener('click', () => {
+      const activeButton = block.querySelector('button.active');
+
+      if (activeButton !== tabButton) {
+        activeButton.classList.remove('active');
+        // remove active class from parent li
+        activeButton.parentElement.classList.remove('active');
+        button.classList.add('active');
+        // add active class to parent li
+        tabButton.classList.add('active');
+
+        tabs.forEach((t) => {
+          if (name === t.name) {
+            t.content.classList.add('active');
+          } else {
+            t.content.classList.remove('active');
+          }
+        });
+      }
+    });
+
+    if (index === 0) {
+      button.classList.add('active');
+      // add active class to parent li
+      tabButton.classList.add('active');
+      if (tab.content) {
+        tab.content.classList.add('active');
+      }
+    }
+  });
+}
diff --git a/styles/styles.css b/styles/styles.css
index b97bb108..2d65c10a 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -419,6 +419,17 @@ main .section .section-container {
   padding-right: 0;
 }
 
+/* section - bold headings */
+
+main .section.bold-headings h1,
+main .section.bold-headings h2,
+main .section.bold-headings h3,
+main .section.bold-headings h4,
+main .section.bold-headings h5,
+main .section.bold-headings h6 {
+  font-weight: var(--font-weight-bold);
+}
+
 /* section - centered */
 .section.centered div {
   align-items: center;
@@ -547,7 +558,6 @@ main .section.spaced h2 {
 
 main .section.spaced h3 {
   margin: 2rem 0;
-  color: var(--text-color);
 }
 
 main .section.spaced p {
@@ -631,6 +641,12 @@ main .section.narrow {
   max-width: 42rem;
 }
 
+/* section - narrower */
+main .section.narrower {
+  padding: 0 1rem;
+  margin: auto;
+}
+
 /* section - static */
 main .section.static {
   margin-bottom: 7.5rem;
@@ -699,6 +715,32 @@ main .section.light-blue {
 
 /* END Section Styles END */
 
+/* START Keyframes START */
+
+@keyframes fade-in {
+  from {
+      opacity: 0;
+  }
+
+  to {
+      opacity: 1;
+      display: block;   
+  }
+}
+
+@keyframes fade-out {
+  from {
+      display: block;
+  }
+
+  to {
+      opacity: 0;
+      display: none;
+  }
+}
+
+/* END Keyframes END */
+
 @media (min-width:62rem) {
   h2 {
     font-size: var(--heading-font-size-xl);
@@ -799,6 +841,17 @@ main .section.light-blue {
     max-width: 54.5rem;
   }
 
+  /* section - narrower */
+  main .section.narrower {
+    position: relative;
+    width: 100%;
+    padding-right: 0;
+    padding-left: 0;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 45rem;
+  }
+
   /* section - contacts and links from global-network */
   main .section.contacts-and-links h3 {
     font-size: var(--heading-font-size-l);