npm - @newskit-render/core - Versions diffs - 1.2.3 → 1.5.2 - Mend

@newskit-render/core 1.2.3 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +140 -0
package/__tests__/pages/[articleSlug].test.tsx +0 -9
package/__tests__/pages/__snapshots__/home.test.tsx.snap +738 -250
package/__tests__/pages/home.test.tsx +0 -9
package/components/article/__tests__/__snapshots__/index.test.tsx.snap +383 -97
package/components/article/__tests__/index.test.tsx +0 -9
package/components/footer/__snapshots__/index.test.tsx.snap +144 -9
package/components/footer/index.test.tsx +0 -9
package/components/header/index.test.tsx +0 -9
package/components/header/index.tsx +1 -1
package/components/section/__tests__/ArticleSlice.test.tsx +2 -10
package/components/section/layouts/__tests__/SectionRow.test.tsx +0 -9
package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap +854 -506
package/next.config.js +0 -13
package/package.json +16 -14
package/pages/account/payment/index.tsx +18 -0
package/pages/checkout/index.tsx +7 -0
package/temp/header.tsx +76 -76
package/pages/api/account/zuora/generate-rsa.ts +0 -5

package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap CHANGED Viewed

@@ -170,6 +170,76 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 .emotion-7 {
+  display: inline-block;
+  transition-property: color;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, .5, 1);
+  color: #0A0A0A;
+}
+.emotion-7 svg {
+  fill: #0A0A0A;
+}
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  margin-left: calc(-8px/2);
+  margin-right: calc(-8px/2);
+}
+.emotion-9 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-left: calc(8px/2);
+  margin-right: calc(8px/2);
+}
+.emotion-10 {
+  margin: 0;
+  padding: 1px 0;
+  font-family: "Poppins",sans-serif;
+  font-size: 14px;
+  line-height: 1.4285714285714286;
+  font-weight: 500;
+  letter-spacing: -0.5px;
+  display: inline-block;
+  display: block;
+}
+.emotion-10::before {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-bottom: -0.3955357142857143em;
+}
+.emotion-10::after {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-top: -0.3955357142857143em;
+}
+.emotion-12 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -180,22 +250,22 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   position: relative;
 }
-.emotion-7.emotion-7 {
+.emotion-12.emotion-12 {
   width: 24px;
   height: 24px;
 }
-.emotion-9 {
+.emotion-14 {
   margin-bottom: 40px;
 }
-.emotion-10 {
+.emotion-15 {
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
 }
-.emotion-11 {
+.emotion-16 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -213,36 +283,36 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen {
-  .emotion-11 {
+  .emotion-16 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 480px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 768px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -32px 8px 0 8px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -32px 12px 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -0px 12px 0 12px;
   }
 }
-.emotion-12 {
+.emotion-17 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -252,7 +322,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen {
-  .emotion-12 {
+  .emotion-17 {
     padding: 0 8px;
     margin-top: 40px;
     -webkit-flex-basis: 100%;
@@ -263,7 +333,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-12 {
+  .emotion-17 {
     margin-top: 32px;
     -webkit-flex-basis: 50%;
     -ms-flex-preferred-size: 50%;
@@ -273,13 +343,13 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen and (min-width: 1024px) {
-  .emotion-12 {
+  .emotion-17 {
     padding: 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-12 {
+  .emotion-17 {
     margin-top: 0;
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
@@ -288,7 +358,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   }
 }
-.emotion-13 {
+.emotion-18 {
   box-sizing: border-box;
   overflow: hidden;
   color: #2E2E2E;
@@ -303,14 +373,14 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   flex-direction: column;
 }
-.emotion-14 {
+.emotion-19 {
   box-sizing: border-box;
   display: block;
   position: relative;
   margin-bottom: 20px;
 }
-.emotion-15 {
+.emotion-20 {
   position: relative;
   width: 100%;
   display: block;
@@ -321,11 +391,11 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   background-color: #F4F4F4;
 }
-.emotion-15 svg {
+.emotion-20 svg {
   fill: #C0C0C0;
 }
-.emotion-16 {
+.emotion-21 {
   top: 0;
   left: 0;
   position: absolute;
@@ -345,7 +415,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   margin: 0;
 }
-.emotion-17 {
+.emotion-22 {
   opacity: 0;
   display: block;
   border-radius: inherit;
@@ -356,67 +426,67 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   position: absolute;
 }
-.emotion-18 {
+.emotion-23 {
   box-sizing: border-box;
 }
-.emotion-19 {
+.emotion-24 {
   box-sizing: border-box;
   padding: 0;
 }
-.emotion-19 a:not(.nk-card-link) {
+.emotion-24 a:not(.nk-card-link) {
   z-index: 2;
   position: relative;
 }
-.emotion-20 {
+.emotion-25 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
 }
-.emotion-20 .nk-headline-kicker {
+.emotion-25 .nk-headline-kicker {
   color: #3358CC;
 }
-.emotion-20:hover:not(:disabled) .nk-headline-kicker {
+.emotion-25:hover:not(:disabled) .nk-headline-kicker {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:active:not(:disabled) .nk-headline-kicker {
+.emotion-25:active:not(:disabled) .nk-headline-kicker {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:visited:not(:disabled) .nk-headline-kicker {
+.emotion-25:visited:not(:disabled) .nk-headline-kicker {
   color: #5E44E4;
 }
-.emotion-20 .nk-headline-heading {
+.emotion-25 .nk-headline-heading {
   color: #2E2E2E;
 }
-.emotion-20:hover:not(:disabled) .nk-headline-heading {
+.emotion-25:hover:not(:disabled) .nk-headline-heading {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:active:not(:disabled) .nk-headline-heading {
+.emotion-25:active:not(:disabled) .nk-headline-heading {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:visited:not(:disabled) .nk-headline-heading {
+.emotion-25:visited:not(:disabled) .nk-headline-heading {
   color: #5E44E4;
 }
-.emotion-20:before {
+.emotion-25:before {
   content: '';
   top: 0;
   right: 0;
@@ -427,22 +497,22 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   z-index: 1;
 }
-.emotion-21 {
+.emotion-26 {
   margin-bottom: 20px;
 }
-.emotion-22 {
+.emotion-27 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-22 svg {
+.emotion-27 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 20px;
     line-height: 1.2;
@@ -450,7 +520,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -458,7 +528,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     margin-bottom: -0.25em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -468,7 +538,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 22px;
     line-height: 1.0909090909090908;
@@ -476,7 +546,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -484,7 +554,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     margin-bottom: -0.19545454545454544em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -494,7 +564,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen and (min-width: 1440px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 1.1666666666666667;
@@ -502,7 +572,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -510,7 +580,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     margin-bottom: -0.2333333333333334em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -519,22 +589,22 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   }
 }
-.emotion-23 {
+.emotion-28 {
   margin-bottom: 12px;
 }
-.emotion-24 {
+.emotion-29 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-24 svg {
+.emotion-29 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
     line-height: 1.4285714285714286;
@@ -542,7 +612,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -550,7 +620,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     margin-bottom: -0.3955357142857143em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -560,7 +630,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
     line-height: 1.5;
@@ -568,7 +638,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -576,7 +646,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     margin-bottom: -0.43125em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -585,7 +655,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   }
 }
-.emotion-64 {
+.emotion-69 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -622,86 +692,103 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
           class="emotion-6"
         >
           <a
+            class="emotion-7"
             href="/section-one"
           >
-            Link
-            <svg
-              aria-hidden="true"
-              class="emotion-7 emotion-8"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="emotion-8"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-              />
-            </svg>
+              <span
+                class="emotion-9"
+              >
+                <span
+                  class="emotion-10"
+                >
+                  Link
+                </span>
+              </span>
+              <span
+                class="emotion-9"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="emotion-12 emotion-13"
+                  fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                  />
+                </svg>
+              </span>
+            </span>
           </a>
         </div>
       </div>
     </div>
     <div
-      class="emotion-9"
+      class="emotion-14"
     >
       <div
-        class="emotion-10"
+        class="emotion-15"
       >
         <div
-          class="emotion-11"
+          class="emotion-16"
           data-testid="SECONDARY_4-Grid"
         >
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-0"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-one/demo-1/test-headline"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text
                       </p>
@@ -712,52 +799,52 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-1"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 2"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-two/demo-2/test-headline-2"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 2
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 2
                       </p>
@@ -768,52 +855,52 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-2"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-three/demo-3/test-headline-3"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 3
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 3
                       </p>
@@ -824,52 +911,52 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-3"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-four/demo-4/test-headline-4"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 4
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 4
                       </p>
@@ -884,7 +971,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-64"
+      class="emotion-69"
       data-testid="divider"
     />
   </div>
@@ -1061,6 +1148,76 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 .emotion-7 {
+  display: inline-block;
+  transition-property: color;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, .5, 1);
+  color: #FFFFFF;
+}
+.emotion-7 svg {
+  fill: #FFFFFF;
+}
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  margin-left: calc(-8px/2);
+  margin-right: calc(-8px/2);
+}
+.emotion-9 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-left: calc(8px/2);
+  margin-right: calc(8px/2);
+}
+.emotion-10 {
+  margin: 0;
+  padding: 1px 0;
+  font-family: "Poppins",sans-serif;
+  font-size: 14px;
+  line-height: 1.4285714285714286;
+  font-weight: 500;
+  letter-spacing: -0.5px;
+  display: inline-block;
+  display: block;
+}
+.emotion-10::before {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-bottom: -0.3955357142857143em;
+}
+.emotion-10::after {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-top: -0.3955357142857143em;
+}
+.emotion-12 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -1071,22 +1228,22 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   position: relative;
 }
-.emotion-7.emotion-7 {
+.emotion-12.emotion-12 {
   width: 24px;
   height: 24px;
 }
-.emotion-9 {
+.emotion-14 {
   margin-bottom: 40px;
 }
-.emotion-10 {
+.emotion-15 {
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
 }
-.emotion-11 {
+.emotion-16 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -1104,36 +1261,36 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen {
-  .emotion-11 {
+  .emotion-16 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 480px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 768px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -32px 8px 0 8px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -32px 12px 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -0px 12px 0 12px;
   }
 }
-.emotion-12 {
+.emotion-17 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -1143,7 +1300,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen {
-  .emotion-12 {
+  .emotion-17 {
     padding: 0 8px;
     margin-top: 40px;
     -webkit-flex-basis: 100%;
@@ -1154,7 +1311,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-12 {
+  .emotion-17 {
     margin-top: 32px;
     -webkit-flex-basis: 50%;
     -ms-flex-preferred-size: 50%;
@@ -1164,13 +1321,13 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen and (min-width: 1024px) {
-  .emotion-12 {
+  .emotion-17 {
     padding: 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-12 {
+  .emotion-17 {
     margin-top: 0;
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
@@ -1179,7 +1336,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   }
 }
-.emotion-13 {
+.emotion-18 {
   box-sizing: border-box;
   overflow: hidden;
   color: #2E2E2E;
@@ -1194,14 +1351,14 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   flex-direction: column;
 }
-.emotion-14 {
+.emotion-19 {
   box-sizing: border-box;
   display: block;
   position: relative;
   margin-bottom: 20px;
 }
-.emotion-15 {
+.emotion-20 {
   position: relative;
   width: 100%;
   display: block;
@@ -1212,11 +1369,11 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   background-color: #F4F4F4;
 }
-.emotion-15 svg {
+.emotion-20 svg {
   fill: #C0C0C0;
 }
-.emotion-16 {
+.emotion-21 {
   top: 0;
   left: 0;
   position: absolute;
@@ -1236,7 +1393,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   margin: 0;
 }
-.emotion-17 {
+.emotion-22 {
   opacity: 0;
   display: block;
   border-radius: inherit;
@@ -1247,67 +1404,67 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   position: absolute;
 }
-.emotion-18 {
+.emotion-23 {
   box-sizing: border-box;
 }
-.emotion-19 {
+.emotion-24 {
   box-sizing: border-box;
   padding: 0;
 }
-.emotion-19 a:not(.nk-card-link) {
+.emotion-24 a:not(.nk-card-link) {
   z-index: 2;
   position: relative;
 }
-.emotion-20 {
+.emotion-25 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
 }
-.emotion-20 .nk-headline-kicker {
+.emotion-25 .nk-headline-kicker {
   color: #3358CC;
 }
-.emotion-20:hover:not(:disabled) .nk-headline-kicker {
+.emotion-25:hover:not(:disabled) .nk-headline-kicker {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:active:not(:disabled) .nk-headline-kicker {
+.emotion-25:active:not(:disabled) .nk-headline-kicker {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:visited:not(:disabled) .nk-headline-kicker {
+.emotion-25:visited:not(:disabled) .nk-headline-kicker {
   color: #5E44E4;
 }
-.emotion-20 .nk-headline-heading {
+.emotion-25 .nk-headline-heading {
   color: #2E2E2E;
 }
-.emotion-20:hover:not(:disabled) .nk-headline-heading {
+.emotion-25:hover:not(:disabled) .nk-headline-heading {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:active:not(:disabled) .nk-headline-heading {
+.emotion-25:active:not(:disabled) .nk-headline-heading {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:visited:not(:disabled) .nk-headline-heading {
+.emotion-25:visited:not(:disabled) .nk-headline-heading {
   color: #5E44E4;
 }
-.emotion-20:before {
+.emotion-25:before {
   content: '';
   top: 0;
   right: 0;
@@ -1318,22 +1475,22 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   z-index: 1;
 }
-.emotion-21 {
+.emotion-26 {
   margin-bottom: 20px;
 }
-.emotion-22 {
+.emotion-27 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-22 svg {
+.emotion-27 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 20px;
     line-height: 1.2;
@@ -1341,7 +1498,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -1349,7 +1506,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     margin-bottom: -0.25em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -1359,7 +1516,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 22px;
     line-height: 1.0909090909090908;
@@ -1367,7 +1524,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -1375,7 +1532,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     margin-bottom: -0.19545454545454544em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -1385,7 +1542,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen and (min-width: 1440px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 1.1666666666666667;
@@ -1393,7 +1550,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -1401,7 +1558,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     margin-bottom: -0.2333333333333334em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -1410,22 +1567,22 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   }
 }
-.emotion-23 {
+.emotion-28 {
   margin-bottom: 12px;
 }
-.emotion-24 {
+.emotion-29 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-24 svg {
+.emotion-29 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
     line-height: 1.4285714285714286;
@@ -1433,7 +1590,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -1441,7 +1598,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     margin-bottom: -0.3955357142857143em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -1451,7 +1608,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
     line-height: 1.5;
@@ -1459,7 +1616,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -1467,7 +1624,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     margin-bottom: -0.43125em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -1476,7 +1633,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   }
 }
-.emotion-64 {
+.emotion-69 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -1513,86 +1670,103 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
           class="emotion-6"
         >
           <a
+            class="emotion-7"
             href="/section-one"
           >
-            Link
-            <svg
-              aria-hidden="true"
-              class="emotion-7 emotion-8"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="emotion-8"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-              />
-            </svg>
+              <span
+                class="emotion-9"
+              >
+                <span
+                  class="emotion-10"
+                >
+                  Link
+                </span>
+              </span>
+              <span
+                class="emotion-9"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="emotion-12 emotion-13"
+                  fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                  />
+                </svg>
+              </span>
+            </span>
           </a>
         </div>
       </div>
     </div>
     <div
-      class="emotion-9"
+      class="emotion-14"
     >
       <div
-        class="emotion-10"
+        class="emotion-15"
       >
         <div
-          class="emotion-11"
+          class="emotion-16"
           data-testid="SECONDARY_4-Grid"
         >
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-0"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-one/demo-1/test-headline"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text
                       </p>
@@ -1603,52 +1777,52 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-1"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 2"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-two/demo-2/test-headline-2"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 2
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 2
                       </p>
@@ -1659,52 +1833,52 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-2"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-three/demo-3/test-headline-3"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 3
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 3
                       </p>
@@ -1715,52 +1889,52 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-3"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-four/demo-4/test-headline-4"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 4
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 4
                       </p>
@@ -1775,7 +1949,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-64"
+      class="emotion-69"
       data-testid="divider"
     />
   </div>
@@ -1952,6 +2126,76 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 .emotion-7 {
+  display: inline-block;
+  transition-property: color;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, .5, 1);
+  color: #FFFFFF;
+}
+.emotion-7 svg {
+  fill: #FFFFFF;
+}
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  margin-left: calc(-8px/2);
+  margin-right: calc(-8px/2);
+}
+.emotion-9 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-left: calc(8px/2);
+  margin-right: calc(8px/2);
+}
+.emotion-10 {
+  margin: 0;
+  padding: 1px 0;
+  font-family: "Poppins",sans-serif;
+  font-size: 14px;
+  line-height: 1.4285714285714286;
+  font-weight: 500;
+  letter-spacing: -0.5px;
+  display: inline-block;
+  display: block;
+}
+.emotion-10::before {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-bottom: -0.3955357142857143em;
+}
+.emotion-10::after {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-top: -0.3955357142857143em;
+}
+.emotion-12 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -1962,22 +2206,22 @@ exports[`SectionRow SectionRow with title 1`] = `
   position: relative;
 }
-.emotion-7.emotion-7 {
+.emotion-12.emotion-12 {
   width: 24px;
   height: 24px;
 }
-.emotion-9 {
+.emotion-14 {
   margin-bottom: 40px;
 }
-.emotion-10 {
+.emotion-15 {
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
 }
-.emotion-11 {
+.emotion-16 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -1995,36 +2239,36 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen {
-  .emotion-11 {
+  .emotion-16 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 480px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 768px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -32px 8px 0 8px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -32px 12px 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-11 {
+  .emotion-16 {
     margin: -0px 12px 0 12px;
   }
 }
-.emotion-12 {
+.emotion-17 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -2034,7 +2278,7 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen {
-  .emotion-12 {
+  .emotion-17 {
     padding: 0 8px;
     margin-top: 40px;
     -webkit-flex-basis: 100%;
@@ -2045,7 +2289,7 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-12 {
+  .emotion-17 {
     margin-top: 32px;
     -webkit-flex-basis: 50%;
     -ms-flex-preferred-size: 50%;
@@ -2055,13 +2299,13 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen and (min-width: 1024px) {
-  .emotion-12 {
+  .emotion-17 {
     padding: 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-12 {
+  .emotion-17 {
     margin-top: 0;
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
@@ -2070,7 +2314,7 @@ exports[`SectionRow SectionRow with title 1`] = `
   }
 }
-.emotion-13 {
+.emotion-18 {
   box-sizing: border-box;
   overflow: hidden;
   color: #2E2E2E;
@@ -2085,14 +2329,14 @@ exports[`SectionRow SectionRow with title 1`] = `
   flex-direction: column;
 }
-.emotion-14 {
+.emotion-19 {
   box-sizing: border-box;
   display: block;
   position: relative;
   margin-bottom: 20px;
 }
-.emotion-15 {
+.emotion-20 {
   position: relative;
   width: 100%;
   display: block;
@@ -2103,11 +2347,11 @@ exports[`SectionRow SectionRow with title 1`] = `
   background-color: #F4F4F4;
 }
-.emotion-15 svg {
+.emotion-20 svg {
   fill: #C0C0C0;
 }
-.emotion-16 {
+.emotion-21 {
   top: 0;
   left: 0;
   position: absolute;
@@ -2127,7 +2371,7 @@ exports[`SectionRow SectionRow with title 1`] = `
   margin: 0;
 }
-.emotion-17 {
+.emotion-22 {
   opacity: 0;
   display: block;
   border-radius: inherit;
@@ -2138,67 +2382,67 @@ exports[`SectionRow SectionRow with title 1`] = `
   position: absolute;
 }
-.emotion-18 {
+.emotion-23 {
   box-sizing: border-box;
 }
-.emotion-19 {
+.emotion-24 {
   box-sizing: border-box;
   padding: 0;
 }
-.emotion-19 a:not(.nk-card-link) {
+.emotion-24 a:not(.nk-card-link) {
   z-index: 2;
   position: relative;
 }
-.emotion-20 {
+.emotion-25 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
 }
-.emotion-20 .nk-headline-kicker {
+.emotion-25 .nk-headline-kicker {
   color: #3358CC;
 }
-.emotion-20:hover:not(:disabled) .nk-headline-kicker {
+.emotion-25:hover:not(:disabled) .nk-headline-kicker {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:active:not(:disabled) .nk-headline-kicker {
+.emotion-25:active:not(:disabled) .nk-headline-kicker {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:visited:not(:disabled) .nk-headline-kicker {
+.emotion-25:visited:not(:disabled) .nk-headline-kicker {
   color: #5E44E4;
 }
-.emotion-20 .nk-headline-heading {
+.emotion-25 .nk-headline-heading {
   color: #2E2E2E;
 }
-.emotion-20:hover:not(:disabled) .nk-headline-heading {
+.emotion-25:hover:not(:disabled) .nk-headline-heading {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:active:not(:disabled) .nk-headline-heading {
+.emotion-25:active:not(:disabled) .nk-headline-heading {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-20:visited:not(:disabled) .nk-headline-heading {
+.emotion-25:visited:not(:disabled) .nk-headline-heading {
   color: #5E44E4;
 }
-.emotion-20:before {
+.emotion-25:before {
   content: '';
   top: 0;
   right: 0;
@@ -2209,22 +2453,22 @@ exports[`SectionRow SectionRow with title 1`] = `
   z-index: 1;
 }
-.emotion-21 {
+.emotion-26 {
   margin-bottom: 20px;
 }
-.emotion-22 {
+.emotion-27 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-22 svg {
+.emotion-27 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 20px;
     line-height: 1.2;
@@ -2232,7 +2476,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -2240,7 +2484,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     margin-bottom: -0.25em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -2250,7 +2494,7 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 22px;
     line-height: 1.0909090909090908;
@@ -2258,7 +2502,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -2266,7 +2510,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     margin-bottom: -0.19545454545454544em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -2276,7 +2520,7 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen and (min-width: 1440px) {
-  .emotion-22 {
+  .emotion-27 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 1.1666666666666667;
@@ -2284,7 +2528,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-22::before {
+  .emotion-27::before {
     content: '';
     display: block;
     height: 0;
@@ -2292,7 +2536,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     margin-bottom: -0.2333333333333334em;
   }
-  .emotion-22::after {
+  .emotion-27::after {
     content: '';
     display: block;
     height: 0;
@@ -2301,22 +2545,22 @@ exports[`SectionRow SectionRow with title 1`] = `
   }
 }
-.emotion-23 {
+.emotion-28 {
   margin-bottom: 12px;
 }
-.emotion-24 {
+.emotion-29 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-24 svg {
+.emotion-29 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
     line-height: 1.4285714285714286;
@@ -2324,7 +2568,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -2332,7 +2576,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     margin-bottom: -0.3955357142857143em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -2342,7 +2586,7 @@ exports[`SectionRow SectionRow with title 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
     line-height: 1.5;
@@ -2350,7 +2594,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -2358,7 +2602,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     margin-bottom: -0.43125em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -2367,7 +2611,7 @@ exports[`SectionRow SectionRow with title 1`] = `
   }
 }
-.emotion-64 {
+.emotion-69 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -2404,86 +2648,103 @@ exports[`SectionRow SectionRow with title 1`] = `
           class="emotion-6"
         >
           <a
+            class="emotion-7"
             href="/section-one"
           >
-            Link
-            <svg
-              aria-hidden="true"
-              class="emotion-7 emotion-8"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="emotion-8"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-              />
-            </svg>
+              <span
+                class="emotion-9"
+              >
+                <span
+                  class="emotion-10"
+                >
+                  Link
+                </span>
+              </span>
+              <span
+                class="emotion-9"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="emotion-12 emotion-13"
+                  fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                  />
+                </svg>
+              </span>
+            </span>
           </a>
         </div>
       </div>
     </div>
     <div
-      class="emotion-9"
+      class="emotion-14"
     >
       <div
-        class="emotion-10"
+        class="emotion-15"
       >
         <div
-          class="emotion-11"
+          class="emotion-16"
           data-testid="SECONDARY_4-Grid"
         >
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-0"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-one/demo-1/test-headline"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text
                       </p>
@@ -2494,52 +2755,52 @@ exports[`SectionRow SectionRow with title 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-1"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 2"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-two/demo-2/test-headline-2"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 2
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 2
                       </p>
@@ -2550,52 +2811,52 @@ exports[`SectionRow SectionRow with title 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-2"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-three/demo-3/test-headline-3"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 3
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 3
                       </p>
@@ -2606,52 +2867,52 @@ exports[`SectionRow SectionRow with title 1`] = `
             </div>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-17"
             data-testid="titleTeaserVertical-3"
           >
             <div
-              class="emotion-13"
+              class="emotion-18"
             >
               <div
-                class="emotion-14"
+                class="emotion-19"
               >
                 <picture
-                  class="emotion-15"
+                  class="emotion-20"
                 >
                   <div
-                    class="emotion-16"
+                    class="emotion-21"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-17"
+                    class="emotion-22"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-18"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-19"
+                  class="emotion-24"
                 >
                   <a
-                    class="nk-card-link emotion-20"
+                    class="nk-card-link emotion-25"
                     href="catagory-four/demo-4/test-headline-4"
                   >
                     <div
-                      class="emotion-21"
+                      class="emotion-26"
                     >
                       <h3
-                        class="emotion-22"
+                        class="emotion-27"
                       >
                         test headline 4
                       </h3>
                     </div>
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <p
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         teaser test text 4
                       </p>
@@ -2666,7 +2927,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-64"
+      class="emotion-69"
       data-testid="divider"
     />
   </div>
@@ -2859,6 +3120,76 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 .emotion-9 {
+  display: inline-block;
+  transition-property: color;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, .5, 1);
+  color: #FFFFFF;
+}
+.emotion-9 svg {
+  fill: #FFFFFF;
+}
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  margin-left: calc(-8px/2);
+  margin-right: calc(-8px/2);
+}
+.emotion-11 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin-left: calc(8px/2);
+  margin-right: calc(8px/2);
+}
+.emotion-12 {
+  margin: 0;
+  padding: 1px 0;
+  font-family: "Poppins",sans-serif;
+  font-size: 14px;
+  line-height: 1.4285714285714286;
+  font-weight: 500;
+  letter-spacing: -0.5px;
+  display: inline-block;
+  display: block;
+}
+.emotion-12::before {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-bottom: -0.3955357142857143em;
+}
+.emotion-12::after {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  margin-top: -0.3955357142857143em;
+}
+.emotion-14 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -2869,22 +3200,22 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   position: relative;
 }
-.emotion-9.emotion-9 {
+.emotion-14.emotion-14 {
   width: 24px;
   height: 24px;
 }
-.emotion-11 {
+.emotion-16 {
   margin-bottom: 40px;
 }
-.emotion-12 {
+.emotion-17 {
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
 }
-.emotion-13 {
+.emotion-18 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -2902,36 +3233,36 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen {
-  .emotion-13 {
+  .emotion-18 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 480px) {
-  .emotion-13 {
+  .emotion-18 {
     margin: -40px 8px 0 8px;
   }
 }
 @media screen and (min-width: 768px) {
-  .emotion-13 {
+  .emotion-18 {
     margin: -32px 8px 0 8px;
   }
 }
 @media screen and (min-width: 1024px) {
-  .emotion-13 {
+  .emotion-18 {
     margin: -32px 12px 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-13 {
+  .emotion-18 {
     margin: -0px 12px 0 12px;
   }
 }
-.emotion-14 {
+.emotion-19 {
   box-sizing: border-box;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -2941,7 +3272,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen {
-  .emotion-14 {
+  .emotion-19 {
     padding: 0 8px;
     margin-top: 40px;
     -webkit-flex-basis: 100%;
@@ -2952,7 +3283,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-14 {
+  .emotion-19 {
     margin-top: 32px;
     -webkit-flex-basis: 50%;
     -ms-flex-preferred-size: 50%;
@@ -2962,13 +3293,13 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen and (min-width: 1024px) {
-  .emotion-14 {
+  .emotion-19 {
     padding: 0 12px;
   }
 }
 @media screen and (min-width: 1440px) {
-  .emotion-14 {
+  .emotion-19 {
     margin-top: 0;
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
@@ -2977,7 +3308,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   }
 }
-.emotion-15 {
+.emotion-20 {
   box-sizing: border-box;
   overflow: hidden;
   color: #2E2E2E;
@@ -2992,14 +3323,14 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   flex-direction: column;
 }
-.emotion-16 {
+.emotion-21 {
   box-sizing: border-box;
   display: block;
   position: relative;
   margin-bottom: 20px;
 }
-.emotion-17 {
+.emotion-22 {
   position: relative;
   width: 100%;
   display: block;
@@ -3010,11 +3341,11 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   background-color: #F4F4F4;
 }
-.emotion-17 svg {
+.emotion-22 svg {
   fill: #C0C0C0;
 }
-.emotion-18 {
+.emotion-23 {
   top: 0;
   left: 0;
   position: absolute;
@@ -3034,7 +3365,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   margin: 0;
 }
-.emotion-19 {
+.emotion-24 {
   opacity: 0;
   display: block;
   border-radius: inherit;
@@ -3045,67 +3376,67 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   position: absolute;
 }
-.emotion-20 {
+.emotion-25 {
   box-sizing: border-box;
 }
-.emotion-21 {
+.emotion-26 {
   box-sizing: border-box;
   padding: 0;
 }
-.emotion-21 a:not(.nk-card-link) {
+.emotion-26 a:not(.nk-card-link) {
   z-index: 2;
   position: relative;
 }
-.emotion-22 {
+.emotion-27 {
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
 }
-.emotion-22 .nk-headline-kicker {
+.emotion-27 .nk-headline-kicker {
   color: #3358CC;
 }
-.emotion-22:hover:not(:disabled) .nk-headline-kicker {
+.emotion-27:hover:not(:disabled) .nk-headline-kicker {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-22:active:not(:disabled) .nk-headline-kicker {
+.emotion-27:active:not(:disabled) .nk-headline-kicker {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-22:visited:not(:disabled) .nk-headline-kicker {
+.emotion-27:visited:not(:disabled) .nk-headline-kicker {
   color: #5E44E4;
 }
-.emotion-22 .nk-headline-heading {
+.emotion-27 .nk-headline-heading {
   color: #2E2E2E;
 }
-.emotion-22:hover:not(:disabled) .nk-headline-heading {
+.emotion-27:hover:not(:disabled) .nk-headline-heading {
   color: #2B4AAB;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-22:active:not(:disabled) .nk-headline-heading {
+.emotion-27:active:not(:disabled) .nk-headline-heading {
   color: #213A82;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
-.emotion-22:visited:not(:disabled) .nk-headline-heading {
+.emotion-27:visited:not(:disabled) .nk-headline-heading {
   color: #5E44E4;
 }
-.emotion-22:before {
+.emotion-27:before {
   content: '';
   top: 0;
   right: 0;
@@ -3116,22 +3447,22 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   z-index: 1;
 }
-.emotion-23 {
+.emotion-28 {
   margin-bottom: 20px;
 }
-.emotion-24 {
+.emotion-29 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-24 svg {
+.emotion-29 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "Bitter",serif;
     font-size: 20px;
     line-height: 1.2;
@@ -3139,7 +3470,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -3147,7 +3478,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     margin-bottom: -0.25em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -3157,7 +3488,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "Bitter",serif;
     font-size: 22px;
     line-height: 1.0909090909090908;
@@ -3165,7 +3496,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -3173,7 +3504,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     margin-bottom: -0.19545454545454544em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -3183,7 +3514,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen and (min-width: 1440px) {
-  .emotion-24 {
+  .emotion-29 {
     font-family: "Bitter",serif;
     font-size: 24px;
     line-height: 1.1666666666666667;
@@ -3191,7 +3522,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-24::before {
+  .emotion-29::before {
     content: '';
     display: block;
     height: 0;
@@ -3199,7 +3530,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     margin-bottom: -0.2333333333333334em;
   }
-  .emotion-24::after {
+  .emotion-29::after {
     content: '';
     display: block;
     height: 0;
@@ -3208,22 +3539,22 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   }
 }
-.emotion-25 {
+.emotion-30 {
   margin-bottom: 12px;
 }
-.emotion-26 {
+.emotion-31 {
   margin: 0;
   padding: 1px 0;
   color: #0A0A0A;
 }
-.emotion-26 svg {
+.emotion-31 svg {
   fill: #0A0A0A;
 }
 @media screen and (max-width: 767px) {
-  .emotion-26 {
+  .emotion-31 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
     line-height: 1.4285714285714286;
@@ -3231,7 +3562,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-26::before {
+  .emotion-31::before {
     content: '';
     display: block;
     height: 0;
@@ -3239,7 +3570,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     margin-bottom: -0.3955357142857143em;
   }
-  .emotion-26::after {
+  .emotion-31::after {
     content: '';
     display: block;
     height: 0;
@@ -3249,7 +3580,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 }
 @media screen and (min-width: 768px) {
-  .emotion-26 {
+  .emotion-31 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
     line-height: 1.5;
@@ -3257,7 +3588,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     letter-spacing: -0.5px;
   }
-  .emotion-26::before {
+  .emotion-31::before {
     content: '';
     display: block;
     height: 0;
@@ -3265,7 +3596,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
     margin-bottom: -0.43125em;
   }
-  .emotion-26::after {
+  .emotion-31::after {
     content: '';
     display: block;
     height: 0;
@@ -3309,86 +3640,103 @@ exports[`SectionRow SectionRow without extra space 1`] = `
           class="emotion-8"
         >
           <a
+            class="emotion-9"
             href="/section-one"
           >
-            Link
-            <svg
-              aria-hidden="true"
-              class="emotion-9 emotion-10"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="emotion-10"
             >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-              />
-            </svg>
+              <span
+                class="emotion-11"
+              >
+                <span
+                  class="emotion-12"
+                >
+                  Link
+                </span>
+              </span>
+              <span
+                class="emotion-11"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="emotion-14 emotion-15"
+                  fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                  />
+                  <path
+                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                  />
+                </svg>
+              </span>
+            </span>
           </a>
         </div>
       </div>
     </div>
     <div
-      class="emotion-11"
+      class="emotion-16"
     >
       <div
-        class="emotion-12"
+        class="emotion-17"
       >
         <div
-          class="emotion-13"
+          class="emotion-18"
           data-testid="SECONDARY_4-Grid"
         >
           <div
-            class="emotion-14"
+            class="emotion-19"
             data-testid="titleTeaserVertical-0"
           >
             <div
-              class="emotion-15"
+              class="emotion-20"
             >
               <div
-                class="emotion-16"
+                class="emotion-21"
               >
                 <picture
-                  class="emotion-17"
+                  class="emotion-22"
                 >
                   <div
-                    class="emotion-18"
+                    class="emotion-23"
                   />
                   <img
                     alt="image alt"
-                    class="emotion-19"
+                    class="emotion-24"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-20"
+                class="emotion-25"
               >
                 <div
-                  class="emotion-21"
+                  class="emotion-26"
                 >
                   <a
-                    class="nk-card-link emotion-22"
+                    class="nk-card-link emotion-27"
                     href="catagory-one/demo-1/test-headline"
                   >
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <h3
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         test headline
                       </h3>
                     </div>
                     <div
-                      class="emotion-25"
+                      class="emotion-30"
                     >
                       <p
-                        class="emotion-26"
+                        class="emotion-31"
                       >
                         teaser test text
                       </p>
@@ -3399,52 +3747,52 @@ exports[`SectionRow SectionRow without extra space 1`] = `
             </div>
           </div>
           <div
-            class="emotion-14"
+            class="emotion-19"
             data-testid="titleTeaserVertical-1"
           >
             <div
-              class="emotion-15"
+              class="emotion-20"
             >
               <div
-                class="emotion-16"
+                class="emotion-21"
               >
                 <picture
-                  class="emotion-17"
+                  class="emotion-22"
                 >
                   <div
-                    class="emotion-18"
+                    class="emotion-23"
                   />
                   <img
                     alt="image alt 2"
-                    class="emotion-19"
+                    class="emotion-24"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-20"
+                class="emotion-25"
               >
                 <div
-                  class="emotion-21"
+                  class="emotion-26"
                 >
                   <a
-                    class="nk-card-link emotion-22"
+                    class="nk-card-link emotion-27"
                     href="catagory-two/demo-2/test-headline-2"
                   >
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <h3
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         test headline 2
                       </h3>
                     </div>
                     <div
-                      class="emotion-25"
+                      class="emotion-30"
                     >
                       <p
-                        class="emotion-26"
+                        class="emotion-31"
                       >
                         teaser test text 2
                       </p>
@@ -3455,52 +3803,52 @@ exports[`SectionRow SectionRow without extra space 1`] = `
             </div>
           </div>
           <div
-            class="emotion-14"
+            class="emotion-19"
             data-testid="titleTeaserVertical-2"
           >
             <div
-              class="emotion-15"
+              class="emotion-20"
             >
               <div
-                class="emotion-16"
+                class="emotion-21"
               >
                 <picture
-                  class="emotion-17"
+                  class="emotion-22"
                 >
                   <div
-                    class="emotion-18"
+                    class="emotion-23"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-19"
+                    class="emotion-24"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-20"
+                class="emotion-25"
               >
                 <div
-                  class="emotion-21"
+                  class="emotion-26"
                 >
                   <a
-                    class="nk-card-link emotion-22"
+                    class="nk-card-link emotion-27"
                     href="catagory-three/demo-3/test-headline-3"
                   >
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <h3
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         test headline 3
                       </h3>
                     </div>
                     <div
-                      class="emotion-25"
+                      class="emotion-30"
                     >
                       <p
-                        class="emotion-26"
+                        class="emotion-31"
                       >
                         teaser test text 3
                       </p>
@@ -3511,52 +3859,52 @@ exports[`SectionRow SectionRow without extra space 1`] = `
             </div>
           </div>
           <div
-            class="emotion-14"
+            class="emotion-19"
             data-testid="titleTeaserVertical-3"
           >
             <div
-              class="emotion-15"
+              class="emotion-20"
             >
               <div
-                class="emotion-16"
+                class="emotion-21"
               >
                 <picture
-                  class="emotion-17"
+                  class="emotion-22"
                 >
                   <div
-                    class="emotion-18"
+                    class="emotion-23"
                   />
                   <img
                     alt="image alt 3"
-                    class="emotion-19"
+                    class="emotion-24"
                     src="some-url-to-image"
                   />
                 </picture>
               </div>
               <div
-                class="emotion-20"
+                class="emotion-25"
               >
                 <div
-                  class="emotion-21"
+                  class="emotion-26"
                 >
                   <a
-                    class="nk-card-link emotion-22"
+                    class="nk-card-link emotion-27"
                     href="catagory-four/demo-4/test-headline-4"
                   >
                     <div
-                      class="emotion-23"
+                      class="emotion-28"
                     >
                       <h3
-                        class="emotion-24"
+                        class="emotion-29"
                       >
                         test headline 4
                       </h3>
                     </div>
                     <div
-                      class="emotion-25"
+                      class="emotion-30"
                     >
                       <p
-                        class="emotion-26"
+                        class="emotion-31"
                       >
                         teaser test text 4
                       </p>