Update css for sustainability page

blocks/accordion/accordion.css

@@ -41,9 +41,31 @@
 
 .accordion details .accordion-item-body {
   padding: 0 16px;
+  font-size: 16px;
+}
+
+.accordion details .accordion-item-body a {
+  display: inline-flex;
+  align-items: baseline;
+  font-weight: 400;
+}
+
+.accordion details .accordion-item-body a .icon {
+  padding: 0 8px;
+  height: 20px;
+  width: 20px;
+  align-self: center;
 }
 
 .accordion details[open] .accordion-item-body {
   border-top: 1px solid var(--dark-color);
   background-color: var(--background-color);
 }
+
+.accordion .accordion-item-label {
+  font-weight: 700;
+}
+
+.accordion .button-container {
+  margin: 0;
+}

blocks/tabs/tabs.css

@@ -9,32 +9,82 @@
   flex: 0 0 max-content;
   margin: 0;
   border-radius: 0;
-  padding: 8px 16px;
+  padding: 9px 0;
   background-color: var(--background-color);
   color: initial;
   font-size: unset;
-  font-weight: bold;
-  line-height: unset;
+  font-weight: 500;
+  line-height: 24px;
   text-align: initial;
   text-overflow: unset;
   overflow: unset;
   white-space: unset;
   transition: background-color 0.2s;
 }
 
+.tabs .tabs-list button p {
+ margin: 0;
+}
+
 .tabs .tabs-list button[aria-selected="true"],
 .tabs .tabs-list button[aria-selected="false"]:hover,
 .tabs .tabs-list button[aria-selected="false"]:focus {
   border-bottom: 2px solid var(--link-color);
 }
 
-
-
 .tabs .tabs-panel {
   padding-top: 10px;
   overflow: auto;
 }
 
+.tabs .tabs-panel h2 {
+  font-family: AktivGrotesk, helvetica, arial, sans-serif;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+  text-transform: inherit;
+}
+
+@media (width > 48rem) {
+  .tabs .tabs-panel h2 {
+    font-size: 1.625rem;
+    line-height: 2rem;
+  }
+}
+
+@media (width > 64rem) {
+  .tabs .tabs-panel h2 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
+@media (width > 80rem) {
+  .tabs .tabs-panel h2 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+
+.tabs .tabs-panel > div > h2:first-child {
+  max-width: 792px;
+  margin-left: auto;
+  margin-right: auto;
+  text-wrap: wrap;
+}
+
+.tabs .tabs-panel > div > p {
+  max-width: 792px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
 .tabs .tabs-panel[aria-hidden="true"] {
   display: none;
 }
+
+.tabs .accordion {
+  max-width: 792px;
+  margin: 64px auto 32px;
+}

blocks/tabs/tabs.js

@@ -5,6 +5,12 @@ function hasWrapper(el) {
   return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
 }
 
+function getContentdById(bootstrapEl, id) {
+  const tabContentEl = document.querySelector(`.${id}`);
+
+  bootstrapEl.parentElement.replaceWith(tabContentEl);
+}
+
 export default async function decorate(block) {
   // build tablist
   const tablist = document.createElement('div');
@@ -50,5 +56,21 @@ export default async function decorate(block) {
     tab.remove();
   });
 
+  const tabsContentList = [...block.querySelectorAll('.tabs-panel > div')];
+
+  tabsContentList.forEach((el) => {
+    const contentLink = [...el.querySelectorAll('a')].find((link) => link.textContent.startsWith('#id-'));
+
+    if (!contentLink) {
+      return;
+    }
+
+    const contentLocation = contentLink.textContent.replace('#', '');
+
+    if (contentLocation) {
+      getContentdById(contentLink, contentLocation);
+    }
+  });
+
   block.prepend(tablist);
 }

blocks/teasers/teasers.css

@@ -0,0 +1,73 @@
+.teasers .teaser-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 80px;
+  margin-top: 32px;
+}
+
+.teasers .teaser-row > div {
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
+}
+
+.teasers .teaser-row p img {
+  height: 20px;
+  width: 20px;
+}
+
+.teasers .teaser-row .teaser-column-with-image {
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
+}
+
+.teasers .teaser-row .teaser-column-with-image picture {
+  display: flex;
+}
+
+.teasers .teaser-row .teaser-column-with-image picture img {
+  width: 100%;
+}
+
+.teasers .teaser-row h2 {
+  margin: 0 0 24px;
+  font-size: 32px;
+  line-height: 44px;
+}
+
+.teasers .teaser-row p {
+  font-size: 16px;
+}
+
+.teasers .teaser-row a {
+  display: inline-flex;
+  align-items: baseline;
+  padding: 0 0.125rem;
+}
+
+.teasers .teaser-row a .icon {
+  align-self: center;
+  padding: 0 0.375rem 0 0;
+  height: 20px;
+  width: 20px;
+}
+
+.teasers hr {
+  border-color: rgb(0 0 0 / 16%);
+  height: 1;
+}
+
+.teasers hr:last-child {
+  display: none;
+}
+
+.teasers.small .teaser-row {
+  max-width: 1020px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.teasers.small .teaser-row > div {
+  flex: 1;
+  max-width: unset;
+}
+

blocks/teasers/teasers.js

@@ -0,0 +1,12 @@
+export default async function decorate(block) {
+  const teasersList = [...block.querySelectorAll(':scope > div')];
+
+  teasersList.forEach((teaserRow, index) => {
+    teaserRow.classList.add('teaser-row');
+    teaserRow.querySelector('picture').closest('div').classList.add('teaser-column-with-image');
+
+    if (index < teasersList.length) {
+      teaserRow.insertAdjacentHTML('afterend', '<hr>');
+    }
+  });
+}

blocks/text/text.css

@@ -0,0 +1,37 @@
+.text {
+  max-width: 52.5rem;
+  font-family: AktivGrotesk, helvetica, arial, sans-serif;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 400;
+  text-wrap: wrap;
+}
+
+@media (width > 48rem) {
+  .text h2 {
+    font-size: 2.25rem;
+    line-height: 2.75rem;
+  }
+}
+
+@media (width > 64rem) {
+  .text h2 {
+    font-size: 2.625rem;
+    line-height: 3.25rem;
+  }
+}
+
+@media (width > 80rem) {
+  .text h2 {
+    font-size: 2.625rem;
+    line-height: 3.25rem;
+  }
+}
+
+.text > div {
+  padding: 0 1.5rem;
+}
+
+.text.center {
+  margin: auto;
+}

blocks/text/text.js

@@ -0,0 +1,3 @@
+export default async function decorate() {
+  /* JS */
+}