@newskit-render/core 1.50.1 → 1.54.0

package/__tests__/pages/__snapshots__/home.test.tsx.snap

@@ -2,441 +2,36 @@
 
 exports[`getServerSideProps Homepage 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  height: 80px;
-  background-color: #3358CC;
-}
-
-.emotion-0 a,
-.emotion-0 a:visited:not(:disabled) {
-  color: #FFFFFF;
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-@media screen {
-  .emotion-0 {
-    padding-top: 16px;
-    padding-bottom: 16px;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-0 {
-    padding-top: 16px;
-    padding-bottom: 16px;
-    padding-left: 64px;
-    padding-right: 64px;
-  }
-}
-
-.emotion-1 {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-@media screen {
-  .emotion-2 {
-    margin: -0px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-2 {
-    margin: -0px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-.emotion-3 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-@media screen {
-  .emotion-3 {
-    padding: 0 8px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-.emotion-4 {
-  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-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-
-.emotion-5 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #FFFFFF;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-5 svg {
-  fill: #FFFFFF;
-}
-
-.emotion-5:hover:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-5:hover:not(:disabled) svg {
-  fill: #FFFFFF;
-}
-
-.emotion-5:active:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-5:active:not(:disabled) svg {
-  fill: #FFFFFF;
-}
-
-.emotion-6 {
-  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;
-}
-
-@media screen {
-  .emotion-7 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-7 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-7 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-7 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-7 {
-    display: block;
-  }
-}
-
-.emotion-8 {
-  display: inline-block;
-  fill: #FFFFFF;
-  color: #FFFFFF;
-  width: 160px;
-}
-
-@media screen {
-  .emotion-9 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-9 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-9 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-9 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-9 {
-    display: none;
-  }
-}
-
-.emotion-11 {
-  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-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-}
-
-.emotion-12 {
-  position: fixed;
-  overflow: auto;
-  width: 100%;
-  min-height: 100vh;
-  background-color: #3358CC;
-  left: 0;
-  top: 80px;
-  z-index: 2;
-  display: none;
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-12 {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    width: initial;
-    min-height: initial;
-    background-color: initial;
-    left: initial;
-    top: initial;
-    z-index: 1;
-    height: 48px;
-  }
-}
-
-.emotion-13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-flow: row wrap;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-13 {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-14 {
-    margin-right: 0;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-14 {
-    margin-right: 16px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-14 {
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-14 {
-    margin-bottom: 0;
-  }
-}
-
-.emotion-17 {
-  margin: 0;
-  font-family: "DM Sans",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-17::before {
-  content: '';
-  margin-bottom: -0.391em;
-  display: block;
-}
-
-.emotion-17::after {
-  content: '';
-  margin-top: -0.409em;
-  display: block;
-}
-
-.emotion-27 {
-  margin-right: 24px;
-}
-
-.emotion-28 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  color: #FFFFFF;
-  fill: #FFFFFF;
-  vertical-align: unset;
-  display: inline-block;
-}
-
-.emotion-28.emotion-28 {
-  width: 32px;
-  height: 32px;
-  color: #FFFFFF;
-  fill: #FFFFFF;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-166vhks"
   >
     <div
-      class="emotion-1"
+      class="css-8atxkm"
     >
       <div
-        class="emotion-2"
+        class="css-1w88buo"
         data-testid="PageLayout"
       >
         <div
-          class="emotion-3"
+          class="css-18d6eiw"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-4"
+            class="css-5zodda"
           >
             <a
               aria-label="Logo Link"
-              class="emotion-5"
+              class="css-71f8au"
               href="/"
             >
               <span
-                class="emotion-6"
+                class="css-7eo7xt"
               >
                 <div
-                  class="emotion-7"
+                  class="css-1nlep1q"
                 >
                   <svg
-                    class="emotion-8"
+                    class="css-kgdu16"
                     height="40px"
                     viewBox="0 0 244 40"
                   >
@@ -464,10 +59,10 @@ exports[`getServerSideProps Homepage 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="emotion-9"
+                  class="css-1k3e0au"
                 >
                   <svg
-                    class="emotion-8"
+                    class="css-kgdu16"
                     height="48px"
                     viewBox="0 0 244 40"
                   >
@@ -493,29 +88,29 @@ exports[`getServerSideProps Homepage 1`] = `
               </span>
             </a>
             <div
-              class="emotion-11"
+              class="css-1d6ks21"
             >
               <div
-                class="emotion-12"
+                class="css-1q7p9do"
                 data-testid="NavigationContainer"
               >
                 <div
-                  class="emotion-13"
+                  class="css-rk1vtl"
                   data-testid="Navigation"
                 >
                   <span
-                    class="emotion-14"
+                    class="css-nch37y"
                   >
                     <a
                       aria-label="Section One Link"
-                      class="emotion-5"
+                      class="css-71f8au"
                       href="/section-one"
                     >
                       <span
-                        class="emotion-6"
+                        class="css-7eo7xt"
                       >
                         <span
-                          class="emotion-17"
+                          class="css-b741cy"
                         >
                           Section One
                         </span>
@@ -523,18 +118,18 @@ exports[`getServerSideProps Homepage 1`] = `
                     </a>
                   </span>
                   <span
-                    class="emotion-14"
+                    class="css-nch37y"
                   >
                     <a
                       aria-label="Section Two Link"
-                      class="emotion-5"
+                      class="css-71f8au"
                       href="/section-two"
                     >
                       <span
-                        class="emotion-6"
+                        class="css-7eo7xt"
                       >
                         <span
-                          class="emotion-17"
+                          class="css-b741cy"
                         >
                           Section Two
                         </span>
@@ -542,18 +137,18 @@ exports[`getServerSideProps Homepage 1`] = `
                     </a>
                   </span>
                   <span
-                    class="emotion-14"
+                    class="css-nch37y"
                   >
                     <a
                       aria-label="Section Three Link"
-                      class="emotion-5"
+                      class="css-71f8au"
                       href="/section-three"
                     >
                       <span
-                        class="emotion-6"
+                        class="css-7eo7xt"
                       >
                         <span
-                          class="emotion-17"
+                          class="css-b741cy"
                         >
                           Section Three
                         </span>
@@ -563,15 +158,15 @@ exports[`getServerSideProps Homepage 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-9"
+                class="css-1k3e0au"
               >
                 <div
-                  class="emotion-27"
+                  class="css-ecgvh"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="Mobile Menu Button"
-                    class="emotion-28 emotion-29"
+                    class="css-9dd1dr-EmotionIconBase ex0cdmw0"
                     data-testid="mobile-menu-btn"
                     fill="currentColor"
                     focusable="false"
@@ -596,1031 +191,65 @@ exports[`getServerSideProps Homepage 1`] = `
       </div>
     </div>
   </div>
-  @media screen {
-  .emotion-0 {
-    background-color: #FFFFFF;
-  }
-}
-
-.emotion-1 {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-@media screen {
-  .emotion-2 {
-    margin: -0px 0px 0 0px;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-2 {
-    margin: -0px 0px 0 0px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-2 {
-    margin: -0px 0px 0 0px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-2 {
-    margin: -0px 0px 0 0px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-2 {
-    margin: -0px 0px 0 0px;
-  }
-}
-
-.emotion-3 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-@media screen {
-  .emotion-3 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-3 {
-    margin-left: 8.333333333333334%;
-    -webkit-flex-basis: 83.33333333333334%;
-    -ms-flex-preferred-size: 83.33333333333334%;
-    flex-basis: 83.33333333333334%;
-    max-width: 83.33333333333334%;
-  }
-}
-
-.emotion-4 {
-  margin-bottom: 40px;
-}
-
-.emotion-5 {
-  display: grid;
-  -webkit-column-gap: 24px;
-  column-gap: 24px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-5 {
-    row-gap: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-5 {
-    row-gap: 32px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-5 {
-    row-gap: 0;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-5 {
-    grid-template-columns: 2fr 1fr;
-  }
-}
-
-.emotion-7 {
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #2E2E2E;
-  background-color: #FFFFFF;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-8 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-8 {
-    margin-bottom: 20px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-8 {
-    margin-bottom: 24px;
-  }
-}
-
-.emotion-9 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 0;
-  height: auto;
-  width: 100%;
-  border-radius: 0;
-}
-
-.emotion-10 {
-  opacity: 1;
-  display: block;
-  border-radius: inherit;
-  height: auto;
-  width: 100%;
-  -webkit-animation: fadeIn 300ms;
-  animation: fadeIn 300ms;
-}
-
-.emotion-11 {
-  box-sizing: border-box;
-}
-
-.emotion-12 {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.emotion-12 a:not(.nk-card-link) {
-  z-index: 2;
-  position: relative;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-13 {
-    margin-bottom: 20px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-13 {
-    margin-bottom: 24px;
-  }
-}
-
-.emotion-14 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-}
-
-.emotion-14 .nk-headline-kicker {
-  color: #3358CC;
-}
-
-.emotion-14:hover:not(:disabled) .nk-headline-kicker {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-14:active:not(:disabled) .nk-headline-kicker {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-14:visited:not(:disabled) .nk-headline-kicker {
-  color: #5E44E4;
-}
-
-.emotion-14 .nk-headline-heading {
-  color: #2E2E2E;
-}
-
-.emotion-14:hover:not(:disabled) .nk-headline-heading {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-14:active:not(:disabled) .nk-headline-heading {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-14:visited:not(:disabled) .nk-headline-heading {
-  color: #5E44E4;
-}
-
-.emotion-14:before {
-  content: '';
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-15 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-15::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-15::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-15 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-15::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-15::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-15 {
-    font-family: "Bitter",serif;
-    font-size: 40px;
-    line-height: 45px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-15::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-15::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-16 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #2E2E2E;
-}
-
-.emotion-16:hover:not(:disabled) {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-16:active:not(:disabled) {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-16:visited:not(:disabled) {
-  color: #5E44E4;
-}
-
-.emotion-17 {
-  display: grid;
-  height: 100%;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-17 {
-    row-gap: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-17 {
-    row-gap: 32px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-17 {
-    row-gap: 24px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-17 {
-    -webkit-column-gap: 20px;
-    column-gap: 20px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-17 {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-17 {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-17 {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-17 {
-    -webkit-box-pack: stretch;
-    -ms-flex-pack: stretch;
-    -webkit-justify-content: stretch;
-    justify-content: stretch;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-17 {
-    -webkit-align-content: space-between;
-    -ms-flex-line-pack: space-between;
-    align-content: space-between;
-  }
-}
-
-.emotion-19 {
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #2E2E2E;
-  background-color: #FFFFFF;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: rowfalse;
-  -ms-flex-direction: rowfalse;
-  flex-direction: rowfalse;
-}
-
-.emotion-20 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-@media screen and (max-width: 479px) {
-  .emotion-20 {
-    margin-right: 16px;
-  }
-}
-
-@media screen and (min-width: 480px) and (max-width: 767px) {
-  .emotion-20 {
-    margin-right: 16px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-20 {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-20 {
-    margin-right: 24px;
-  }
-}
-
-.emotion-23 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-24 {
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding: 0;
-}
-
-.emotion-24 a:not(.nk-card-link) {
-  z-index: 2;
-  position: relative;
-}
-
-.emotion-25 {
-  margin-bottom: 8px;
-}
-
-@media screen and (max-width: 479px) {
-  .emotion-27 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-27::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-27::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 480px) and (max-width: 767px) {
-  .emotion-27 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-27::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-27::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-27 {
-    font-family: "Bitter",serif;
-    font-size: 22px;
-    line-height: 24.75px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-27::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-27::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-27 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-27::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-27::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-41 {
-  display: grid;
-  -webkit-column-gap: 24px;
-  column-gap: 24px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-41 {
-    row-gap: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-41 {
-    row-gap: 32px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-41 {
-    row-gap: 0;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-41 {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-41 {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-41 {
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-  }
-}
-
-.emotion-45 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 0;
-  height: 0;
-  width: 100%;
-  border-radius: 0;
-  background-color: #F4F4F4;
-}
-
-.emotion-45 svg {
-  fill: #C0C0C0;
-}
-
-.emotion-46 {
-  top: 0;
-  left: 0;
-  position: absolute;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-
-.emotion-47 {
-  opacity: 0;
-  display: block;
-  border-radius: inherit;
-  height: auto;
-  width: 100%;
-  top: 0;
-  left: 0;
-  position: absolute;
-}
-
-.emotion-90 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #3358CC;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-90 svg {
-  fill: #3358CC;
-}
-
-.emotion-90:hover:not(:disabled) {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-90:hover:not(:disabled) svg {
-  fill: #2B4AAB;
-}
-
-.emotion-90:active:not(:disabled) {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-90:active:not(:disabled) svg {
-  fill: #213A82;
-}
-
-.emotion-91 {
-  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;
-}
-
-.emotion-92 {
-  margin: 0;
-  font-family: "Poppins",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-92::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-92::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-.emotion-111 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 56%;
-  height: 0;
-  width: 100%;
-  border-radius: 0;
-  background-color: #F4F4F4;
-}
-
-.emotion-111 svg {
-  fill: #C0C0C0;
-}
-
-.emotion-118 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-118 svg {
-  fill: #0A0A0A;
-}
-
-.emotion-123 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 66%;
-  height: 0;
-  width: 100%;
-  border-radius: 0;
-  background-color: #F4F4F4;
-}
-
-.emotion-123 svg {
-  fill: #C0C0C0;
-}
-
-.emotion-143 {
-  display: grid;
-  -webkit-column-gap: 24px;
-  column-gap: 24px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-143 {
-    row-gap: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-143 {
-    row-gap: 32px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-143 {
-    row-gap: 0;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-143 {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-143 {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.emotion-146 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  margin-bottom: 20px;
-}
-
-.emotion-152 {
-  margin-bottom: 20px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-154 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-154::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-154::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-154 {
-    font-family: "Bitter",serif;
-    font-size: 22px;
-    line-height: 24.75px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-154::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-154::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-154 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-154::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-154::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-156 {
-  margin-bottom: 12px;
-}
-
-.emotion-157 {
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-157 svg {
-  fill: #0A0A0A;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-157 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-157::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-157::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-157 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-157::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-157::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1ce0b49"
   >
     <div
-      class="emotion-1"
+      class="css-8atxkm"
     >
       <div
-        class="emotion-2"
+        class="css-1eslldr"
         data-testid="SectionGrid"
       >
         <div
-          class="emotion-3"
+          class="css-1c1wp9z"
           data-testid="SectionCell"
         >
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
           <div
-            class="emotion-5"
+            class="css-1u38jm6"
             data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
           >
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="featureVerticalCell"
             >
               <div
-                class="emotion-7"
+                class="css-syq769"
               >
                 <div
-                  class="emotion-8"
+                  class="css-1ku19cs"
                 >
                   <picture
-                    class="emotion-9"
+                    class="css-iq6vim"
                   >
                     <img
                       alt=""
-                      class="emotion-10"
+                      class="css-ssxt4f"
                       src=""
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-11"
+                  class="css-1shocxe"
                 >
                   <div
-                    class="emotion-12"
+                    class="css-1a2irou"
                   >
                     <div
-                      class="emotion-13"
+                      class="css-1hcm6l"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-one/demo-1/test-headline"
                       >
                         <section
-                          class="emotion-15"
+                          class="css-kxmtg8"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline
                           </h3>
@@ -1632,46 +261,46 @@ exports[`getServerSideProps Homepage 1`] = `
               </div>
             </div>
             <div
-              class="emotion-17"
+              class="css-7644f"
             >
               <div
-                class="emotion-6"
+                class="css-151qm6o"
                 data-testid="titleVerticalCell-0"
               >
                 <div
-                  class="emotion-19"
+                  class="css-51dsvu"
                 >
                   <div
-                    class="emotion-20"
+                    class="css-fv6m0t"
                   >
                     <picture
-                      class="emotion-9"
+                      class="css-iq6vim"
                     >
                       <img
                         alt=""
-                        class="emotion-10"
+                        class="css-ssxt4f"
                         src=""
                       />
                     </picture>
                   </div>
                   <div
-                    class="emotion-23"
+                    class="css-1r2lt0d"
                   >
                     <div
-                      class="emotion-24"
+                      class="css-bw3bp5"
                     >
                       <div
-                        class="emotion-25"
+                        class="css-vj2a37"
                       >
                         <a
-                          class="nk-card-link emotion-14"
+                          class="nk-card-link css-1cq1vxv"
                           href="catagory-two/demo-2/test-headline-2"
                         >
                           <section
-                            class="emotion-27"
+                            class="css-75k513"
                           >
                             <h3
-                              class="nk-headline-heading emotion-16"
+                              class="nk-headline-heading css-10swdqn"
                             >
                               test headline 2
                             </h3>
@@ -1683,43 +312,43 @@ exports[`getServerSideProps Homepage 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-6"
+                class="css-151qm6o"
                 data-testid="titleVerticalCell-1"
               >
                 <div
-                  class="emotion-19"
+                  class="css-51dsvu"
                 >
                   <div
-                    class="emotion-20"
+                    class="css-fv6m0t"
                   >
                     <picture
-                      class="emotion-9"
+                      class="css-iq6vim"
                     >
                       <img
                         alt=""
-                        class="emotion-10"
+                        class="css-ssxt4f"
                         src=""
                       />
                     </picture>
                   </div>
                   <div
-                    class="emotion-23"
+                    class="css-1r2lt0d"
                   >
                     <div
-                      class="emotion-24"
+                      class="css-bw3bp5"
                     >
                       <div
-                        class="emotion-25"
+                        class="css-vj2a37"
                       >
                         <a
-                          class="nk-card-link emotion-14"
+                          class="nk-card-link css-1cq1vxv"
                           href="catagory-three/demo-3/test-headline-3"
                         >
                           <section
-                            class="emotion-27"
+                            class="css-75k513"
                           >
                             <h3
-                              class="nk-headline-heading emotion-16"
+                              class="nk-headline-heading css-10swdqn"
                             >
                               test headline 3
                             </h3>
@@ -1733,53 +362,53 @@ exports[`getServerSideProps Homepage 1`] = `
             </div>
           </div>
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
           <div
-            class="emotion-41"
+            class="css-1qhyrcz"
             data-testid="SECONDARY_4-Grid"
           >
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="titleTeaserVertical-0"
             >
               <div
-                class="emotion-19"
+                class="css-51dsvu"
               >
                 <div
-                  class="emotion-20"
+                  class="css-fv6m0t"
                 >
                   <picture
-                    class="emotion-45"
+                    class="css-1tors5"
                   >
                     <div
-                      class="emotion-46"
+                      class="css-5pczz7"
                     />
                     <img
                       alt="image alt"
-                      class="emotion-47"
+                      class="css-1qgqq71"
                       src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-23"
+                  class="css-1r2lt0d"
                 >
                   <div
-                    class="emotion-24"
+                    class="css-bw3bp5"
                   >
                     <div
-                      class="emotion-25"
+                      class="css-vj2a37"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-one/demo-1/test-headline"
                       >
                         <section
-                          class="emotion-27"
+                          class="css-75k513"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline
                           </h3>
@@ -1791,46 +420,46 @@ exports[`getServerSideProps Homepage 1`] = `
               </div>
             </div>
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="titleTeaserVertical-1"
             >
               <div
-                class="emotion-19"
+                class="css-51dsvu"
               >
                 <div
-                  class="emotion-20"
+                  class="css-fv6m0t"
                 >
                   <picture
-                    class="emotion-45"
+                    class="css-1tors5"
                   >
                     <div
-                      class="emotion-46"
+                      class="css-5pczz7"
                     />
                     <img
                       alt="image alt 2"
-                      class="emotion-47"
+                      class="css-1qgqq71"
                       src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-23"
+                  class="css-1r2lt0d"
                 >
                   <div
-                    class="emotion-24"
+                    class="css-bw3bp5"
                   >
                     <div
-                      class="emotion-25"
+                      class="css-vj2a37"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-two/demo-2/test-headline-2"
                       >
                         <section
-                          class="emotion-27"
+                          class="css-75k513"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline 2
                           </h3>
@@ -1842,43 +471,43 @@ exports[`getServerSideProps Homepage 1`] = `
               </div>
             </div>
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="titleTeaserVertical-2"
             >
               <div
-                class="emotion-19"
+                class="css-51dsvu"
               >
                 <div
-                  class="emotion-20"
+                  class="css-fv6m0t"
                 >
                   <picture
-                    class="emotion-9"
+                    class="css-iq6vim"
                   >
                     <img
                       alt=""
-                      class="emotion-10"
+                      class="css-ssxt4f"
                       src=""
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-23"
+                  class="css-1r2lt0d"
                 >
                   <div
-                    class="emotion-24"
+                    class="css-bw3bp5"
                   >
                     <div
-                      class="emotion-25"
+                      class="css-vj2a37"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-three/demo-3/test-headline-3"
                       >
                         <section
-                          class="emotion-27"
+                          class="css-75k513"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline 3
                           </h3>
@@ -1890,46 +519,46 @@ exports[`getServerSideProps Homepage 1`] = `
               </div>
             </div>
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="titleTeaserVertical-3"
             >
               <div
-                class="emotion-19"
+                class="css-51dsvu"
               >
                 <div
-                  class="emotion-20"
+                  class="css-fv6m0t"
                 >
                   <picture
-                    class="emotion-45"
+                    class="css-1tors5"
                   >
                     <div
-                      class="emotion-46"
+                      class="css-5pczz7"
                     />
                     <img
                       alt="image alt 3"
-                      class="emotion-47"
+                      class="css-1qgqq71"
                       src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-23"
+                  class="css-1r2lt0d"
                 >
                   <div
-                    class="emotion-24"
+                    class="css-bw3bp5"
                   >
                     <div
-                      class="emotion-25"
+                      class="css-vj2a37"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-four/demo-4/test-headline-4"
                       >
                         <section
-                          class="emotion-27"
+                          class="css-75k513"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline 4
                           </h3>
@@ -1942,7 +571,7 @@ exports[`getServerSideProps Homepage 1`] = `
             </div>
           </div>
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
           <div
             class="LEAD_1_AND_1"
@@ -1952,14 +581,14 @@ exports[`getServerSideProps Homepage 1`] = `
             </h2>
             <p>
               <a
-                class="emotion-90"
+                class="css-te0m4d"
                 href="/catagory-one/demo-1/test-headline"
               >
                 <span
-                  class="emotion-91"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-92"
+                    class="css-1l5ehtz"
                   >
                     test headline
                   </span>
@@ -1968,14 +597,14 @@ exports[`getServerSideProps Homepage 1`] = `
             </p>
             <p>
               <a
-                class="emotion-90"
+                class="css-te0m4d"
                 href="/catagory-two/demo-2/test-headline-2"
               >
                 <span
-                  class="emotion-91"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-92"
+                    class="css-1l5ehtz"
                   >
                     test headline 2
                   </span>
@@ -1984,7 +613,7 @@ exports[`getServerSideProps Homepage 1`] = `
             </p>
           </div>
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
           <div
             class="LEAD_1_AND_1"
@@ -1994,14 +623,14 @@ exports[`getServerSideProps Homepage 1`] = `
             </h2>
             <p>
               <a
-                class="emotion-90"
+                class="css-te0m4d"
                 href="/uncategorized"
               >
                 <span
-                  class="emotion-91"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-92"
+                    class="css-1l5ehtz"
                   >
                     TODO - External Reference
                   </span>
@@ -2010,14 +639,14 @@ exports[`getServerSideProps Homepage 1`] = `
             </p>
             <p>
               <a
-                class="emotion-90"
+                class="css-te0m4d"
                 href="/uncategorized"
               >
                 <span
-                  class="emotion-91"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-92"
+                    class="css-1l5ehtz"
                   >
                     TODO - Video
                   </span>
@@ -2026,14 +655,14 @@ exports[`getServerSideProps Homepage 1`] = `
             </p>
             <p>
               <a
-                class="emotion-90"
+                class="css-te0m4d"
                 href="/uncategorized"
               >
                 <span
-                  class="emotion-91"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-92"
+                    class="css-1l5ehtz"
                   >
                     Unknown slice block - something
                   </span>
@@ -2042,48 +671,48 @@ exports[`getServerSideProps Homepage 1`] = `
             </p>
           </div>
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
           <div
-            class="emotion-5"
+            class="css-1u38jm6"
             data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
           >
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="featureVerticalCell"
             >
               <div
-                class="emotion-7"
+                class="css-syq769"
               >
                 <div
-                  class="emotion-8"
+                  class="css-1ku19cs"
                 >
                   <picture
-                    class="emotion-111"
+                    class="css-1runu6d"
                   >
                     <div
-                      class="emotion-46"
+                      class="css-5pczz7"
                     />
                     <img
-                      class="emotion-47"
+                      class="css-1qgqq71"
                       src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-11"
+                  class="css-1shocxe"
                 >
                   <div
-                    class="emotion-12"
+                    class="css-1a2irou"
                   >
                     <div
-                      class="emotion-13"
+                      class="css-1hcm6l"
                     >
                       <section
-                        class="emotion-15"
+                        class="css-kxmtg8"
                       >
                         <h3
-                          class="nk-headline-heading emotion-118"
+                          class="nk-headline-heading css-5gd387"
                         >
                           TODO - External Reference
                         </h3>
@@ -2094,44 +723,44 @@ exports[`getServerSideProps Homepage 1`] = `
               </div>
             </div>
             <div
-              class="emotion-17"
+              class="css-7644f"
             >
               <div
-                class="emotion-6"
+                class="css-151qm6o"
                 data-testid="titleVerticalCell-0"
               >
                 <div
-                  class="emotion-19"
+                  class="css-51dsvu"
                 >
                   <div
-                    class="emotion-20"
+                    class="css-fv6m0t"
                   >
                     <picture
-                      class="emotion-123"
+                      class="css-1t36qhh"
                     >
                       <div
-                        class="emotion-46"
+                        class="css-5pczz7"
                       />
                       <img
-                        class="emotion-47"
+                        class="css-1qgqq71"
                         src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
                       />
                     </picture>
                   </div>
                   <div
-                    class="emotion-23"
+                    class="css-1r2lt0d"
                   >
                     <div
-                      class="emotion-24"
+                      class="css-bw3bp5"
                     >
                       <div
-                        class="emotion-25"
+                        class="css-vj2a37"
                       >
                         <section
-                          class="emotion-27"
+                          class="css-75k513"
                         >
                           <h3
-                            class="nk-headline-heading emotion-118"
+                            class="nk-headline-heading css-5gd387"
                           >
                             TODO - Video
                           </h3>
@@ -2142,41 +771,41 @@ exports[`getServerSideProps Homepage 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-6"
+                class="css-151qm6o"
                 data-testid="titleVerticalCell-1"
               >
                 <div
-                  class="emotion-19"
+                  class="css-51dsvu"
                 >
                   <div
-                    class="emotion-20"
+                    class="css-fv6m0t"
                   >
                     <picture
-                      class="emotion-123"
+                      class="css-1t36qhh"
                     >
                       <div
-                        class="emotion-46"
+                        class="css-5pczz7"
                       />
                       <img
-                        class="emotion-47"
+                        class="css-1qgqq71"
                         src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
                       />
                     </picture>
                   </div>
                   <div
-                    class="emotion-23"
+                    class="css-1r2lt0d"
                   >
                     <div
-                      class="emotion-24"
+                      class="css-bw3bp5"
                     >
                       <div
-                        class="emotion-25"
+                        class="css-vj2a37"
                       >
                         <section
-                          class="emotion-27"
+                          class="css-75k513"
                         >
                           <h3
-                            class="nk-headline-heading emotion-118"
+                            class="nk-headline-heading css-5gd387"
                           >
                             Unknown slice block - something
                           </h3>
@@ -2189,53 +818,53 @@ exports[`getServerSideProps Homepage 1`] = `
             </div>
           </div>
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
           <div
-            class="emotion-143"
+            class="css-1u4ep79"
             data-testid="SECONDARY_2_AND_2-Grid"
           >
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="titleTeaserVertical-0"
             >
               <div
-                class="emotion-7"
+                class="css-syq769"
               >
                 <div
-                  class="emotion-146"
+                  class="css-m79op6"
                 >
                   <picture
-                    class="emotion-45"
+                    class="css-1tors5"
                   >
                     <div
-                      class="emotion-46"
+                      class="css-5pczz7"
                     />
                     <img
                       alt="image alt"
-                      class="emotion-47"
+                      class="css-1qgqq71"
                       src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-11"
+                  class="css-1shocxe"
                 >
                   <div
-                    class="emotion-12"
+                    class="css-1a2irou"
                   >
                     <div
-                      class="emotion-152"
+                      class="css-6e1vry"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-one/demo-1/test-headline"
                       >
                         <section
-                          class="emotion-154"
+                          class="css-zs57uu"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline
                           </h3>
@@ -2243,10 +872,10 @@ exports[`getServerSideProps Homepage 1`] = `
                       </a>
                     </div>
                     <div
-                      class="emotion-156"
+                      class="css-1nj1cp8"
                     >
                       <p
-                        class="emotion-157"
+                        class="css-1t9lxz1"
                       >
                         teaser test text
                       </p>
@@ -2256,46 +885,46 @@ exports[`getServerSideProps Homepage 1`] = `
               </div>
             </div>
             <div
-              class="emotion-6"
+              class="css-151qm6o"
               data-testid="titleTeaserVertical-1"
             >
               <div
-                class="emotion-7"
+                class="css-syq769"
               >
                 <div
-                  class="emotion-146"
+                  class="css-m79op6"
                 >
                   <picture
-                    class="emotion-45"
+                    class="css-1tors5"
                   >
                     <div
-                      class="emotion-46"
+                      class="css-5pczz7"
                     />
                     <img
                       alt="image alt 2"
-                      class="emotion-47"
+                      class="css-1qgqq71"
                       src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                     />
                   </picture>
                 </div>
                 <div
-                  class="emotion-11"
+                  class="css-1shocxe"
                 >
                   <div
-                    class="emotion-12"
+                    class="css-1a2irou"
                   >
                     <div
-                      class="emotion-152"
+                      class="css-6e1vry"
                     >
                       <a
-                        class="nk-card-link emotion-14"
+                        class="nk-card-link css-1cq1vxv"
                         href="catagory-one/demo-2/test-headline-2"
                       >
                         <section
-                          class="emotion-154"
+                          class="css-zs57uu"
                         >
                           <h3
-                            class="nk-headline-heading emotion-16"
+                            class="nk-headline-heading css-10swdqn"
                           >
                             test headline 2
                           </h3>
@@ -2303,10 +932,10 @@ exports[`getServerSideProps Homepage 1`] = `
                       </a>
                     </div>
                     <div
-                      class="emotion-156"
+                      class="css-1nj1cp8"
                     >
                       <p
-                        class="emotion-157"
+                        class="css-1t9lxz1"
                       >
                         teaser test text 2
                       </p>
@@ -2317,265 +946,31 @@ exports[`getServerSideProps Homepage 1`] = `
             </div>
           </div>
           <div
-            class="emotion-4"
+            class="css-1t4e7f6"
           />
         </div>
       </div>
     </div>
   </div>
-  .emotion-0 {
-  background-color: #0A0A0A;
-  width: 100%;
-  bottom: 0;
-  display: block;
-  padding: 12px;
-}
-
-.emotion-1 {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-@media screen {
-  .emotion-2 {
-    margin: -0px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-2 {
-    margin: -0px 8px 0 8px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-2 {
-    margin: -0px 16px 0 16px;
-  }
-}
-
-.emotion-3 {
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-@media screen {
-  .emotion-3 {
-    padding: 0 8px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-.emotion-4 {
-  margin-bottom: 12px;
-}
-
-.emotion-5 {
-  display: inline-block;
-  fill: #FFFFFF;
-  color: #FFFFFF;
-  width: 160px;
-}
-
-.emotion-7 {
-  border-width: 0px;
-  margin: 0;
-  width: 100%;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex-flow: row wrap;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-bottom: 24px;
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-8 {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    -webkit-justify-content: flex-start;
-    justify-content: flex-start;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
-.emotion-9 {
-  margin-bottom: 16px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-9 {
-    margin-right: 0;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-9 {
-    margin-right: 64px;
-  }
-}
-
-.emotion-10 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  color: #FFFFFF;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-10 svg {
-  fill: #FFFFFF;
-}
-
-.emotion-10:hover:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-10:hover:not(:disabled) svg {
-  fill: #FFFFFF;
-}
-
-.emotion-10:active:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-10:active:not(:disabled) svg {
-  fill: #FFFFFF;
-}
-
-.emotion-11 {
-  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;
-}
-
-.emotion-12 {
-  margin: 0;
-  font-family: "DM Sans",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-12::before {
-  content: '';
-  margin-bottom: -0.391em;
-  display: block;
-}
-
-.emotion-12::after {
-  content: '';
-  margin-top: -0.409em;
-  display: block;
-}
-
-.emotion-35 {
-  margin: 0;
-  color: #535353;
-  font-family: "DM Sans",sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 500;
-  letter-spacing: 0;
-}
-
-.emotion-35 svg {
-  fill: #535353;
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1p8e12n"
   >
     <div
-      class="emotion-1"
+      class="css-8atxkm"
     >
       <div
-        class="emotion-2"
+        class="css-1w88buo"
         data-testid="PageLayout"
       >
         <div
-          class="emotion-3"
+          class="css-18d6eiw"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-4"
+            class="css-1nj1cp8"
           >
             <svg
-              class="emotion-5"
+              class="css-kgdu16"
               height="48px"
               viewBox="0 0 244 40"
             >
@@ -2599,30 +994,30 @@ exports[`getServerSideProps Homepage 1`] = `
             </svg>
           </div>
           <div
-            class="emotion-4"
+            class="css-1nj1cp8"
           >
             <hr
               aria-hidden="true"
-              class="emotion-7"
+              class="css-ucwznq"
               data-testid="divider"
             />
           </div>
           <div
-            class="emotion-8"
+            class="css-hx18jh"
           >
             <span
-              class="emotion-9"
+              class="css-zkhuqg"
             >
               <a
                 aria-label="NavLink One"
-                class="emotion-10"
+                class="css-71f8au"
                 href="/link-one"
               >
                 <span
-                  class="emotion-11"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-b741cy"
                   >
                     NavLink One
                   </span>
@@ -2630,18 +1025,18 @@ exports[`getServerSideProps Homepage 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-zkhuqg"
             >
               <a
                 aria-label="NavLink Two"
-                class="emotion-10"
+                class="css-71f8au"
                 href="/link-two"
               >
                 <span
-                  class="emotion-11"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-b741cy"
                   >
                     NavLink Two
                   </span>
@@ -2649,18 +1044,18 @@ exports[`getServerSideProps Homepage 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-zkhuqg"
             >
               <a
                 aria-label="NavLink Three"
-                class="emotion-10"
+                class="css-71f8au"
                 href="/link-three"
               >
                 <span
-                  class="emotion-11"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-b741cy"
                   >
                     NavLink Three
                   </span>
@@ -2668,18 +1063,18 @@ exports[`getServerSideProps Homepage 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-zkhuqg"
             >
               <a
                 aria-label="NavLink Four"
-                class="emotion-10"
+                class="css-71f8au"
                 href="/link-four"
               >
                 <span
-                  class="emotion-11"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-b741cy"
                   >
                     NavLink Four
                   </span>
@@ -2687,18 +1082,18 @@ exports[`getServerSideProps Homepage 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-zkhuqg"
             >
               <a
                 aria-label="NavLink Five"
-                class="emotion-10"
+                class="css-71f8au"
                 href="/link-five"
               >
                 <span
-                  class="emotion-11"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-b741cy"
                   >
                     NavLink Five
                   </span>
@@ -2706,18 +1101,18 @@ exports[`getServerSideProps Homepage 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-zkhuqg"
             >
               <a
                 aria-label="NavLink Six"
-                class="emotion-10"
+                class="css-71f8au"
                 href="/link-six"
               >
                 <span
-                  class="emotion-11"
+                  class="css-7eo7xt"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-b741cy"
                   >
                     NavLink Six
                   </span>
@@ -2726,16 +1121,16 @@ exports[`getServerSideProps Homepage 1`] = `
             </span>
           </div>
           <div
-            class="emotion-4"
+            class="css-1nj1cp8"
           >
             <hr
               aria-hidden="true"
-              class="emotion-7"
+              class="css-ucwznq"
               data-testid="divider"
             />
           </div>
           <p
-            class="emotion-35"
+            class="css-1rn2unv"
           >
             Copyright © YYYY News Corp. All rights reserved.
           </p>