@newskit-render/core 1.50.1 → 1.63.2

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,441 +2,36 @@
 
 exports[`Article should render tile and sub title 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-jl4h98"
           >
             <a
               aria-label="Logo Link"
-              class="emotion-5"
+              class="css-e43kyg"
               href="/"
             >
               <span
-                class="emotion-6"
+                class="css-17x5lw"
               >
                 <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[`Article should render tile and sub title 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[`Article should render tile and sub title 1`] = `
               </span>
             </a>
             <div
-              class="emotion-11"
+              class="css-12mm2yp"
             >
               <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-10bwu4j"
                   >
                     <a
                       aria-label="Section One Link"
-                      class="emotion-5"
+                      class="css-e43kyg"
                       href="/section-one"
                     >
                       <span
-                        class="emotion-6"
+                        class="css-17x5lw"
                       >
                         <span
-                          class="emotion-17"
+                          class="css-kxo08d"
                         >
                           Section One
                         </span>
@@ -523,18 +118,18 @@ exports[`Article should render tile and sub title 1`] = `
                     </a>
                   </span>
                   <span
-                    class="emotion-14"
+                    class="css-10bwu4j"
                   >
                     <a
                       aria-label="Section Two Link"
-                      class="emotion-5"
+                      class="css-e43kyg"
                       href="/section-two"
                     >
                       <span
-                        class="emotion-6"
+                        class="css-17x5lw"
                       >
                         <span
-                          class="emotion-17"
+                          class="css-kxo08d"
                         >
                           Section Two
                         </span>
@@ -542,18 +137,18 @@ exports[`Article should render tile and sub title 1`] = `
                     </a>
                   </span>
                   <span
-                    class="emotion-14"
+                    class="css-10bwu4j"
                   >
                     <a
                       aria-label="Section Three Link"
-                      class="emotion-5"
+                      class="css-e43kyg"
                       href="/section-three"
                     >
                       <span
-                        class="emotion-6"
+                        class="css-17x5lw"
                       >
                         <span
-                          class="emotion-17"
+                          class="css-kxo08d"
                         >
                           Section Three
                         </span>
@@ -563,15 +158,15 @@ exports[`Article should render tile and sub title 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-9"
+                class="css-1k3e0au"
               >
                 <div
-                  class="emotion-27"
+                  class="css-qzhw9i"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="Mobile Menu Button"
-                    class="emotion-28 emotion-29"
+                    class="css-yyp9n-EmotionIconBase ex0cdmw0"
                     data-testid="mobile-menu-btn"
                     fill="currentColor"
                     focusable="false"
@@ -596,2411 +191,101 @@ exports[`Article should render tile and sub title 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 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%;
-  }
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-4 {
-    margin-bottom: 40px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-4 {
-    margin-bottom: 48px;
-  }
-}
-
-.emotion-5 {
-  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-5 {
-    padding: 0 8px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-5 {
-    margin-left: 8.333333333333334%;
-    -webkit-flex-basis: 83.33333333333334%;
-    -ms-flex-preferred-size: 83.33333333333334%;
-    flex-basis: 83.33333333333334%;
-    max-width: 83.33333333333334%;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-5 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-.emotion-6 {
-  margin-bottom: 24px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-7 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-7::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-7::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-7 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-7::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-7::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .emotion-7 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-7::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-7::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-7 {
-    font-family: "Bitter",serif;
-    font-size: 40px;
-    line-height: 45px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-7::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-7::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-8 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-8 svg {
-  fill: #0A0A0A;
-}
-
-.emotion-9 {
-  margin-bottom: 48px;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-10 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-10::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-10::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-11 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #2E2E2E;
-}
-
-.emotion-11 svg {
-  fill: #2E2E2E;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-12 {
-    margin-bottom: 16px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-12 {
-    margin-bottom: 48px;
-  }
-}
-
-@media screen {
-  .emotion-13 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-13 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-13 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-13 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-13 {
-    display: none;
-  }
-}
-
-@media screen {
-  .emotion-14 {
-    margin-bottom: 16px;
-  }
-}
-
-.emotion-16 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-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: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -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-top: calc(-8px/2);
-  margin-bottom: calc(-8px/2);
-}
-
-.emotion-17 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-top: calc(8px/2);
-  margin-bottom: calc(8px/2);
-}
-
-.emotion-18 {
-  margin: 0;
-  color: #2E2E2E;
-  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;
-}
-
-.emotion-18 svg {
-  fill: #2E2E2E;
-}
-
-.emotion-18::before {
-  content: '';
-  margin-bottom: -0.391em;
-  display: block;
-}
-
-.emotion-18::after {
-  content: '';
-  margin-top: -0.409em;
-  display: block;
-}
-
-.emotion-19 {
-  display: inline-block;
-  transition-property: color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-}
-
-.emotion-20 {
-  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(-4px/2);
-  margin-right: calc(-4px/2);
-}
-
-.emotion-21 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(4px/2);
-  margin-right: calc(4px/2);
-}
-
-.emotion-22 {
-  margin: 0;
-  font-family: "DM Sans",sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 500;
-  letter-spacing: 0;
-  display: block;
-}
-
-.emotion-24 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  fill: #2E2E2E;
-  vertical-align: unset;
-  display: inline-block;
-}
-
-.emotion-24.emotion-24 {
-  width: 16px;
-  height: 16px;
-}
-
-.emotion-28 {
-  margin: 0;
-  color: #2E2E2E;
-  font-family: "DM Sans",sans-serif;
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 400;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-  white-space: pre;
-}
-
-.emotion-28 svg {
-  fill: #2E2E2E;
-}
-
-.emotion-28::before {
-  content: '';
-  margin-bottom: -0.391em;
-  display: block;
-}
-
-.emotion-28::after {
-  content: '';
-  margin-top: -0.409em;
-  display: block;
-}
-
-.emotion-28:before,
-.emotion-28:after {
-  white-space: normal;
-}
-
-.emotion-30 {
-  border-style: solid;
-  border-color: #DEDEDE;
-  border-width: 1px;
-  border-width: 0px;
-  margin: 0;
-  border-top-width: 1px;
-  width: 100%;
-}
-
-.emotion-32 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  min-height: 32px;
-  min-width: 64px;
-  padding: 8px 12px;
-  cursor: default;
-  overflow: hidden;
-  border: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  border-style: solid;
-  border-color: #3358CC;
-  border-width: 1px;
-  border-radius: 8px;
-  color: #3358CC;
-  margin: 0;
-  transition-property: background-color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  cursor: pointer;
-}
-
-.emotion-32 svg {
-  width: 16px;
-  height: 16px;
-}
-
-.emotion-32 svg {
-  fill: #3358CC;
-}
-
-.emotion-32:hover:not(:disabled) {
-  background-color: #E0E7FF;
-  border-color: #2B4AAB;
-}
-
-.emotion-32:active:not(:disabled) {
-  background-color: #AEBFFF;
-  border-color: #213A82;
-}
-
-.emotion-32:disabled {
-  border-color: #F4F4F4;
-  color: #C0C0C0;
-}
-
-.emotion-32:disabled svg {
-  fill: #C0C0C0;
-}
-
-.emotion-33 {
-  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: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  margin-left: calc(-8px/2);
-  margin-right: calc(-8px/2);
-}
-
-.emotion-34 {
-  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-35 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  fill: #2E2E2E;
-  vertical-align: unset;
-  display: inline-block;
-}
-
-.emotion-38 {
-  margin: 0;
-  font-family: "Poppins",sans-serif;
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  display: inline-block;
-}
-
-.emotion-38::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-38::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-@media screen {
-  .emotion-39 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-39 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-39 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-39 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-39 {
-    display: block;
-  }
-}
-
-.emotion-40 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  -webkit-align-content: flex-end;
-  -ms-flex-line-pack: flex-end;
-  align-content: flex-end;
-  -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-55 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-}
-
-.emotion-56 {
-  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-57 {
-  font-family: "Poppins",sans-serif;
-  font-size: 14px;
-  line-height: 21px;
-  font-weight: 500;
-  letter-spacing: 0;
-  padding: 0.5px 0px;
-  color: #2E2E2E;
-  margin-right: 24px;
-}
-
-.emotion-57::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-57::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-.emotion-57 svg {
-  fill: #2E2E2E;
-}
-
-.emotion-58 {
-  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(-24px/2);
-  margin-right: calc(-24px/2);
-}
-
-.emotion-59 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(24px/2);
-  margin-right: calc(24px/2);
-}
-
-.emotion-60 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  color: #3358CC;
-  fill: #3358CC;
-  vertical-align: unset;
-  display: inline-block;
-}
-
-.emotion-60.emotion-60 {
-  width: 24px;
-  height: 24px;
-  color: #3358CC;
-  fill: #3358CC;
-}
-
-.emotion-63 {
-  color: #3358CC;
-  fill: #3358CC;
-  vertical-align: unset;
-  display: inline-block;
-}
-
-.emotion-63.emotion-63 {
-  width: 24px;
-  height: 24px;
-  color: #3358CC;
-  fill: #3358CC;
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-69 {
-    margin-bottom: 32px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-69 {
-    margin-bottom: 40px;
-  }
-}
-
-.emotion-70 {
-  margin: 0;
-}
-
-.emotion-71 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 0;
-  height: 0;
-  width: 100%;
-  border-radius: 0;
-  background-color: #F4F4F4;
-}
-
-.emotion-71 svg {
-  fill: #C0C0C0;
-}
-
-.emotion-72 {
-  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-73 {
-  opacity: 0;
-  display: block;
-  border-radius: inherit;
-  height: auto;
-  width: 100%;
-  top: 0;
-  left: 0;
-  position: absolute;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-74 {
-    margin-bottom: 32px;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-74 {
-    margin-bottom: 48px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-74 {
-    margin-bottom: 80px;
-  }
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-75 {
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-75 {
-    margin-bottom: 40px;
-  }
-}
-
-.emotion-76 {
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-76 svg {
-  fill: #0A0A0A;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-76 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-76::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-76::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-76 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-76::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-76::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-76 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 18px;
-    line-height: 27px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-76::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-76::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-.emotion-86 {
-  margin-bottom: 80px;
-}
-
-.emotion-98 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  -webkit-align-content: flex-end;
-  -ms-flex-line-pack: flex-end;
-  align-content: flex-end;
-  -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;
-  margin-left: calc(-32px/2);
-  margin-right: calc(-32px/2);
-}
-
-.emotion-99 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(32px/2);
-  margin-right: calc(32px/2);
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-115 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-115::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-115::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-115 {
-    font-family: "Bitter",serif;
-    font-size: 22px;
-    line-height: 24.75px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-115::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-115::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-115 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-115::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-115::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-117 {
-  margin-bottom: 32px;
-}
-
-.emotion-118 {
-  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: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -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(-16px/2);
-  margin-right: calc(-16px/2);
-}
-
-.emotion-119 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: calc(16px/2);
-  margin-right: calc(16px/2);
-}
-
-.emotion-120 {
-  margin-bottom: 16px;
-}
-
-.emotion-121 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  min-height: 32px;
-  padding: 8px 12px;
-  cursor: default;
-  overflow: hidden;
-  border: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  border-style: solid;
-  border-color: #535353;
-  border-width: 1px;
-  color: #2E2E2E;
-  border-radius: 0;
-}
-
-.emotion-121 svg {
-  width: 16px;
-  height: 16px;
-}
-
-.emotion-121 svg {
-  fill: #2E2E2E;
-}
-
-.emotion-121:hover:not(:disabled) {
-  background-color: #F4F4F4;
-}
-
-.emotion-121:active:not(:disabled) {
-  border-width: 1px;
-}
-
-.emotion-122 {
-  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: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  margin-left: calc(-4px/2);
-  margin-right: calc(-4px/2);
-}
-
-.emotion-124 {
-  margin: 0;
-  display: inline-block;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-124 {
-    font-family: "Poppins",sans-serif;
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-124::before {
-    content: '';
-    margin-bottom: -0.403em;
-    display: block;
-  }
-
-  .emotion-124::after {
-    content: '';
-    margin-top: -0.4em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-124 {
-    font-family: "Poppins",sans-serif;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-124::before {
-    content: '';
-    margin-bottom: -0.403em;
-    display: block;
-  }
-
-  .emotion-124::after {
-    content: '';
-    margin-top: -0.4em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-124 {
-    font-family: "Poppins",sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-124::before {
-    content: '';
-    margin-bottom: -0.403em;
-    display: block;
-  }
-
-  .emotion-124::after {
-    content: '';
-    margin-top: -0.4em;
-    display: block;
-  }
-}
-
-.emotion-133 {
-  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-133 {
-    padding: 0 8px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-133 {
-    margin-left: 8.333333333333334%;
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-.emotion-134 {
-  padding: 8px 12px;
-}
-
-@media screen and (max-width: 1023px) {
-  .emotion-134 {
-    margin-bottom: 40px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-134 {
-    margin-bottom: 24px;
-  }
-}
-
-.emotion-135 {
-  height: 250px;
-  max-width: 300px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-@media screen {
-  .emotion-138 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-138 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-138 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-138 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-138 {
-    display: block;
-  }
-}
-
-@media screen and (max-width: 1439px) {
-  .emotion-139 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-139::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-139::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-139 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-139::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-139::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen {
-  .emotion-141 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-141 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-141 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-141 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-141 {
-    display: none;
-  }
-}
-
-.emotion-142 {
-  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: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  background-color: transparent;
-}
-
-@media screen {
-  .emotion-142 {
-    padding: 0;
-  }
-}
-
-.emotion-143 {
-  margin-right: 16px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-@media screen {
-  .emotion-146 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-146 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-146 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-146 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-146 {
-    display: block;
-  }
-}
-
-.emotion-147 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  min-height: 48px;
-  min-width: 80px;
-  padding: 12px 16px;
-  cursor: default;
-  overflow: hidden;
-  border: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  color: #3358CC;
-  margin: 0;
-  transition-property: background-color;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0, 0, .5, 1);
-  cursor: pointer;
-}
-
-.emotion-147 svg {
-  width: 24px;
-  height: 24px;
-}
-
-.emotion-147 svg {
-  fill: #3358CC;
-}
-
-.emotion-150 {
-  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;
-}
-
-.emotion-150::before {
-  content: '';
-  margin-bottom: -0.403em;
-  display: block;
-}
-
-.emotion-150::after {
-  content: '';
-  margin-top: -0.4em;
-  display: block;
-}
-
-.emotion-152 {
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  fill: #2E2E2E;
-  vertical-align: unset;
-  display: inline-block;
-}
-
-.emotion-152.emotion-152 {
-  width: 24px;
-  height: 24px;
-}
-
-.emotion-156 {
-  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-156 {
-    margin: -16px -8px 0 -8px;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-156 {
-    margin: -16px -8px 0 -8px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-156 {
-    margin: -16px -8px 0 -8px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-156 {
-    margin: -24px -12px 0 -12px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-156 {
-    margin: -24px -12px 0 -12px;
-  }
-}
-
-.emotion-157 {
-  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-157 {
-    padding: 0 8px;
-    margin-top: 16px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-157 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-157 {
-    padding: 0 12px;
-    margin-top: 24px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-.emotion-159 {
-  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-160 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  margin-right: 12px;
-}
-
-.emotion-161 {
-  position: relative;
-  width: 100%;
-  display: block;
-  width: 150px;
-  height: 100px;
-  border-radius: 0;
-  background-color: #F4F4F4;
-}
-
-.emotion-161 svg {
-  fill: #C0C0C0;
-}
-
-.emotion-163 {
-  opacity: 0;
-  display: block;
-  border-radius: inherit;
-  height: 100px;
-  width: 150px;
-  top: 0;
-  left: 0;
-  position: absolute;
-}
-
-.emotion-164 {
-  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-165 {
-  box-sizing: border-box;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding: 0;
-}
-
-.emotion-165 a:not(.nk-card-link) {
-  z-index: 2;
-  position: relative;
-}
-
-.emotion-166 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-}
-
-.emotion-166 .nk-headline-kicker {
-  color: #3358CC;
-}
-
-.emotion-166:hover:not(:disabled) .nk-headline-kicker {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-166:active:not(:disabled) .nk-headline-kicker {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-166:visited:not(:disabled) .nk-headline-kicker {
-  color: #5E44E4;
-}
-
-.emotion-166 .nk-headline-heading {
-  color: #2E2E2E;
-}
-
-.emotion-166:hover:not(:disabled) .nk-headline-heading {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-166:active:not(:disabled) .nk-headline-heading {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-166:visited:not(:disabled) .nk-headline-heading {
-  color: #5E44E4;
-}
-
-.emotion-166:before {
-  content: '';
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-}
-
-@media screen and (max-width: 1439px) {
-  .emotion-167 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-167::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-167::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-167 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-167::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-167::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-168 {
-  display: inline;
-  font: inherit;
-  margin: 0;
-  color: #2E2E2E;
-}
-
-.emotion-168:hover:not(:disabled) {
-  color: #2B4AAB;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-168:active:not(:disabled) {
-  color: #213A82;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-168:visited:not(:disabled) {
-  color: #5E44E4;
-}
-
-.emotion-181 {
-  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-181 {
-    padding: 0 8px;
-    margin-top: 16px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-181 {
-    padding: 0 12px;
-    margin-top: 24px;
-  }
-}
-
-.emotion-184 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-}
-
-.emotion-185 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-199 {
-    font-family: "Bitter",serif;
-    font-size: 28px;
-    line-height: 31.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-199::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-199::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-199 {
-    font-family: "Bitter",serif;
-    font-size: 32px;
-    line-height: 36px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-199::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-199::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-199 {
-    font-family: "Bitter",serif;
-    font-size: 36px;
-    line-height: 40.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-199::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-199::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-211 {
-  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-211 {
-    padding: 0 8px;
-    margin-top: 16px;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-211 {
-    -webkit-flex-basis: 50%;
-    -ms-flex-preferred-size: 50%;
-    flex-basis: 50%;
-    max-width: 50%;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-211 {
-    padding: 0 12px;
-    margin-top: 24px;
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-.emotion-212 {
-  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-213 {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  margin-bottom: 12px;
-}
-
-.emotion-214 {
-  position: relative;
-  width: 100%;
-  display: block;
-  padding-top: 66%;
-  height: 0;
-  width: 100%;
-  border-radius: 0;
-  background-color: #F4F4F4;
-}
-
-.emotion-214 svg {
-  fill: #C0C0C0;
-}
-
-.emotion-217 {
-  box-sizing: border-box;
-}
-
-.emotion-218 {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.emotion-218 a:not(.nk-card-link) {
-  z-index: 2;
-  position: relative;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-220 {
-    margin-bottom: 16px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-220 {
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-222 {
-    font-family: "Bitter",serif;
-    font-size: 20px;
-    line-height: 22.5px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-222::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-222::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 1439px) {
-  .emotion-222 {
-    font-family: "Bitter",serif;
-    font-size: 22px;
-    line-height: 24.75px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-222::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-222::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-222 {
-    font-family: "Bitter",serif;
-    font-size: 24px;
-    line-height: 27px;
-    font-weight: 500;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-222::before {
-    content: '';
-    margin-bottom: -0.2055em;
-    display: block;
-  }
-
-  .emotion-222::after {
-    content: '';
-    margin-top: -0.2275em;
-    display: block;
-  }
-}
-
-.emotion-225 {
-  margin: 0;
-  color: #0A0A0A;
-}
-
-.emotion-225 svg {
-  fill: #0A0A0A;
-}
-
-@media screen and (max-width: 767px) {
-  .emotion-225 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-225::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-225::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-225 {
-    font-family: "DM Sans",sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    letter-spacing: 0;
-    padding: 0.5px 0px;
-  }
-
-  .emotion-225::before {
-    content: '';
-    margin-bottom: -0.391em;
-    display: block;
-  }
-
-  .emotion-225::after {
-    content: '';
-    margin-top: -0.409em;
-    display: block;
-  }
-}
-
-@media screen {
-  .emotion-242 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 480px) {
-  .emotion-242 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .emotion-242 {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .emotion-242 {
-    display: block;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .emotion-242 {
-    display: none;
-  }
-}
-
-@media screen {
-  .emotion-255 {
-    margin-bottom: 64px;
-  }
-}
-
-<div
-    class="emotion-0"
+  <div
+    class="css-1ce0b49"
   >
     <div
-      class="emotion-1"
+      class="css-8atxkm"
     >
       <div
-        class="emotion-2"
+        class="css-11sfip2"
         data-testid="PageLayout"
       >
         <div
-          class="emotion-3"
+          class="css-18d6eiw"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-4"
+            class="css-ywgq8m"
           />
         </div>
         <div
-          class="emotion-5"
+          class="css-1hoolz9"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-6"
+            class="css-16in0m0"
             data-testid="HeadLine"
           >
             <section
-              class="emotion-7"
+              class="css-1wf58dm"
             >
               <h1
-                class="nk-headline-heading emotion-8"
+                class="nk-headline-heading css-5gd387"
               >
                 Mock Article: Lorem ipsum dolor sit amet consectetur adipiscing elit
               </h1>
             </section>
           </div>
           <div
-            class="emotion-9"
+            class="css-gxh9kv"
             data-testid="Kicker"
           >
             <section
-              class="emotion-10"
+              class="css-k0zmqb"
             >
               <h2
-                class="nk-headline-heading emotion-11"
+                class="nk-headline-heading css-1qhitfs"
               >
                 Kicker title
               </h2>
             </section>
           </div>
           <div
-            class="emotion-12"
+            class="css-1wffvjk"
           >
             <div
-              class="emotion-13"
+              class="css-1k3e0au"
             >
               <div
-                class="emotion-14"
+                class="css-1fmioha"
               >
                 <div
-                  class="emotion-15"
+                  class="css-30qa7x"
                 >
                   <div
-                    class="emotion-16"
+                    class="css-1jjwo6p"
                   >
                     <div
-                      class="emotion-17"
+                      class="css-1penzzz"
                     >
                       <span
-                        class="emotion-18"
+                        class="css-1p5w9xw"
                       >
                         <a
                           aria-label="more by John Smith"
-                          class="emotion-19"
+                          class="css-14yas4a"
                           data-author="John Smith"
                           href="https://www.newskit.co.uk/components/navigation/link"
                           rel="author"
                         >
                           <span
-                            class="emotion-20"
+                            class="css-pqzzby"
                           >
                             <span
-                              class="emotion-21"
+                              class="css-14dqn90"
                             >
                               <span
-                                class="emotion-22"
+                                class="css-muj8w6"
                               >
                                 John Smith
                               </span>
                             </span>
                             <span
-                              class="emotion-21"
+                              class="css-14dqn90"
                             >
                               <svg
-                                class="emotion-24 emotion-25"
+                                class="css-19fc6y7-EmotionIconBase ex0cdmw0"
                                 fill="currentColor"
                                 focusable="false"
                                 role="img"
@@ -3023,7 +308,7 @@ exports[`Article should render tile and sub title 1`] = `
                         </a>
                         <span
                           aria-hidden="true"
-                          class="emotion-18"
+                          class="css-1p5w9xw"
                         >
                           , 
                         </span>
@@ -3032,11 +317,13 @@ exports[`Article should render tile and sub title 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-15"
+                    class="css-30qa7x"
                   >
-                    <time>
+                    <time
+                      class="css-k9ha2f"
+                    >
                       <span
-                        class="emotion-28"
+                        class="css-1khiq05"
                       >
                         Thu February 14 2019, 12:37am 
                       </span>
@@ -3045,31 +332,31 @@ exports[`Article should render tile and sub title 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-14"
+                class="css-1fmioha"
               >
                 <hr
                   aria-hidden="true"
-                  class="emotion-30"
+                  class="css-633um5"
                   data-testid="divider"
                 />
               </div>
               <div
-                class="emotion-6"
+                class="css-16in0m0"
               >
                 <a
-                  class="emotion-32"
+                  class="css-1fgc81t"
                   data-testid="buttonLink"
                   href="https://www.newskit.co.uk/"
                 >
                   <div
-                    class="emotion-33"
+                    class="css-bptyib"
                   >
                     <div
-                      class="emotion-34"
+                      class="css-1yztr03"
                     >
                       <svg
                         aria-hidden="true"
-                        class="emotion-35 emotion-25"
+                        class="css-tf5kji-EmotionIconBase ex0cdmw0"
                         fill="currentColor"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -3085,10 +372,10 @@ exports[`Article should render tile and sub title 1`] = `
                       </svg>
                     </div>
                     <div
-                      class="emotion-34"
+                      class="css-1yztr03"
                     >
                       <span
-                        class="emotion-38"
+                        class="css-1v8h4au"
                       >
                         Share
                       </span>
@@ -3098,48 +385,48 @@ exports[`Article should render tile and sub title 1`] = `
               </div>
             </div>
             <div
-              class="emotion-39"
+              class="css-1nlep1q"
             >
               <div
-                class="emotion-40"
+                class="css-15zrtsn"
                 data-testid="MetaBox"
               >
                 <div
-                  class="emotion-15"
+                  class="css-30qa7x"
                 >
                   <div
-                    class="emotion-16"
+                    class="css-1jjwo6p"
                   >
                     <div
-                      class="emotion-17"
+                      class="css-1penzzz"
                     >
                       <span
-                        class="emotion-18"
+                        class="css-1p5w9xw"
                       >
                         <a
                           aria-label="more by John Smith"
-                          class="emotion-19"
+                          class="css-14yas4a"
                           data-author="John Smith"
                           href="https://www.newskit.co.uk/components/navigation/link"
                           rel="author"
                         >
                           <span
-                            class="emotion-20"
+                            class="css-pqzzby"
                           >
                             <span
-                              class="emotion-21"
+                              class="css-14dqn90"
                             >
                               <span
-                                class="emotion-22"
+                                class="css-muj8w6"
                               >
                                 John Smith
                               </span>
                             </span>
                             <span
-                              class="emotion-21"
+                              class="css-14dqn90"
                             >
                               <svg
-                                class="emotion-24 emotion-25"
+                                class="css-19fc6y7-EmotionIconBase ex0cdmw0"
                                 fill="currentColor"
                                 focusable="false"
                                 role="img"
@@ -3162,7 +449,7 @@ exports[`Article should render tile and sub title 1`] = `
                         </a>
                         <span
                           aria-hidden="true"
-                          class="emotion-18"
+                          class="css-1p5w9xw"
                         >
                           , 
                         </span>
@@ -3171,11 +458,13 @@ exports[`Article should render tile and sub title 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-15"
+                    class="css-30qa7x"
                   >
-                    <time>
+                    <time
+                      class="css-k9ha2f"
+                    >
                       <span
-                        class="emotion-28"
+                        class="css-1khiq05"
                       >
                         Thu February 14 2019, 12:37am 
                       </span>
@@ -3183,28 +472,28 @@ exports[`Article should render tile and sub title 1`] = `
                   </div>
                 </div>
                 <div
-                  class="emotion-55"
+                  class="css-1rjn7y8"
                 >
                   <div
-                    class="emotion-56"
+                    class="css-1mvna34"
                     orientation="horizontal"
                     role="region"
                   >
                     <span
-                      class="emotion-57"
+                      class="css-1e1hg9i"
                       orientation="horizontal"
                     >
                       Share
                     </span>
                     <div
-                      class="emotion-58"
+                      class="css-18bz6hs"
                     >
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-60 emotion-25"
+                          class="css-2blx0a-EmotionIconBase ex0cdmw0"
                           fill="currentColor"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -3220,11 +509,11 @@ exports[`Article should render tile and sub title 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-63"
+                          class="css-144awdp"
                           fill="currentColor"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -3236,11 +525,11 @@ exports[`Article should render tile and sub title 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-63"
+                          class="css-144awdp"
                           fill="currentColor"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -3252,11 +541,11 @@ exports[`Article should render tile and sub title 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-60 emotion-25"
+                          class="css-2blx0a-EmotionIconBase ex0cdmw0"
                           fill="currentColor"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -3278,99 +567,99 @@ exports[`Article should render tile and sub title 1`] = `
             </div>
           </div>
           <div
-            class="emotion-69"
+            class="css-nvrg5u"
           >
             <figure
-              class="emotion-70"
+              class="css-r44k6v"
             >
               <picture
-                class="emotion-71"
+                class="css-1tors5"
               >
                 <div
-                  class="emotion-72"
+                  class="css-5pczz7"
                 />
                 <img
                   alt="testIMG"
-                  class="emotion-73"
+                  class="css-1qgqq71"
                   src="img//url"
                 />
               </picture>
             </figure>
           </div>
           <div
-            class="emotion-74"
+            class="css-1vdrff9"
             data-testid="ArticleContent"
           >
             <div
-              class="emotion-75"
+              class="css-lcu8j4"
               data-testid="ArticleParagraph"
             >
               <p
-                class="emotion-76"
+                class="css-77jvx4"
               >
                 paragraph one
               </p>
             </div>
             <div
-              class="emotion-75"
+              class="css-lcu8j4"
               data-testid="ArticleParagraph"
             >
               <p
-                class="emotion-76"
+                class="css-77jvx4"
               >
                 paragraph two
               </p>
             </div>
             <div
-              class="emotion-75"
+              class="css-lcu8j4"
               data-testid="ArticleParagraph"
             >
               <p
-                class="emotion-76"
+                class="css-77jvx4"
               >
                 paragraph three
               </p>
             </div>
             <div
-              class="emotion-75"
+              class="css-lcu8j4"
               data-testid="ArticleParagraph"
             >
               <p
-                class="emotion-76"
+                class="css-77jvx4"
               >
                 paragraph four
               </p>
             </div>
           </div>
           <div
-            class="emotion-13"
+            class="css-1k3e0au"
           >
             <div
-              class="emotion-6"
+              class="css-16in0m0"
             >
               <hr
                 aria-hidden="true"
-                class="emotion-30"
+                class="css-633um5"
                 data-testid="divider"
               />
             </div>
             <div
-              class="emotion-86"
+              class="css-bmafgm"
             >
               <a
-                class="emotion-32"
+                class="css-1fgc81t"
                 data-testid="buttonLink"
                 href="https://www.newskit.co.uk/"
               >
                 <div
-                  class="emotion-33"
+                  class="css-bptyib"
                 >
                   <div
-                    class="emotion-34"
+                    class="css-1yztr03"
                   >
                     <svg
                       aria-hidden="true"
-                      class="emotion-35 emotion-25"
+                      class="css-tf5kji-EmotionIconBase ex0cdmw0"
                       fill="currentColor"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -3386,10 +675,10 @@ exports[`Article should render tile and sub title 1`] = `
                     </svg>
                   </div>
                   <div
-                    class="emotion-34"
+                    class="css-1yztr03"
                   >
                     <span
-                      class="emotion-38"
+                      class="css-1v8h4au"
                     >
                       Share
                     </span>
@@ -3399,46 +688,46 @@ exports[`Article should render tile and sub title 1`] = `
             </div>
           </div>
           <div
-            class="emotion-39"
+            class="css-1nlep1q"
           >
             <div
-              class="emotion-6"
+              class="css-16in0m0"
             >
               <hr
                 aria-hidden="true"
-                class="emotion-30"
+                class="css-633um5"
                 data-testid="divider"
               />
             </div>
             <div
-              class="emotion-86"
+              class="css-bmafgm"
             >
               <div
-                class="emotion-98"
+                class="css-1pbg2cs"
               >
                 <div
-                  class="emotion-99"
+                  class="css-xnj4zj"
                 >
                   <div
-                    class="emotion-56"
+                    class="css-1mvna34"
                     orientation="horizontal"
                     role="region"
                   >
                     <span
-                      class="emotion-57"
+                      class="css-1e1hg9i"
                       orientation="horizontal"
                     >
                       Share
                     </span>
                     <div
-                      class="emotion-58"
+                      class="css-18bz6hs"
                     >
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-60 emotion-25"
+                          class="css-2blx0a-EmotionIconBase ex0cdmw0"
                           fill="currentColor"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -3454,11 +743,11 @@ exports[`Article should render tile and sub title 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-63"
+                          class="css-144awdp"
                           fill="currentColor"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -3470,11 +759,11 @@ exports[`Article should render tile and sub title 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-63"
+                          class="css-144awdp"
                           fill="currentColor"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -3486,11 +775,11 @@ exports[`Article should render tile and sub title 1`] = `
                         </svg>
                       </div>
                       <div
-                        class="emotion-59"
+                        class="css-5ou914"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-60 emotion-25"
+                          class="css-2blx0a-EmotionIconBase ex0cdmw0"
                           fill="currentColor"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -3512,46 +801,46 @@ exports[`Article should render tile and sub title 1`] = `
             </div>
           </div>
           <div
-            class="emotion-15"
+            class="css-30qa7x"
           >
             <div
-              class="emotion-6"
+              class="css-16in0m0"
             >
               <section
-                class="emotion-115"
+                class="css-qv96ce"
               >
                 <h1
-                  class="nk-headline-heading emotion-11"
+                  class="nk-headline-heading css-1qhitfs"
                 >
                   Related topics
                 </h1>
               </section>
             </div>
             <div
-              class="emotion-117"
+              class="css-38y4ob"
             >
               <div
-                class="emotion-118"
+                class="css-mdhsjw"
                 data-testid="RelatedTopics"
               >
                 <div
-                  class="emotion-119"
+                  class="css-1jnyopt"
                 >
                   <div
-                    class="emotion-120"
+                    class="css-14xhfxi"
                   >
                     <div
-                      class="emotion-121"
+                      class="css-1oe1rpd"
                       data-testid="tag"
                     >
                       <div
-                        class="emotion-122"
+                        class="css-m556v"
                       >
                         <div
-                          class="emotion-21"
+                          class="css-14dqn90"
                         >
                           <span
-                            class="emotion-124"
+                            class="css-1erkh45"
                           >
                             Some topic one
                           </span>
@@ -3561,23 +850,23 @@ exports[`Article should render tile and sub title 1`] = `
                   </div>
                 </div>
                 <div
-                  class="emotion-119"
+                  class="css-1jnyopt"
                 >
                   <div
-                    class="emotion-120"
+                    class="css-14xhfxi"
                   >
                     <div
-                      class="emotion-121"
+                      class="css-1oe1rpd"
                       data-testid="tag"
                     >
                       <div
-                        class="emotion-122"
+                        class="css-m556v"
                       >
                         <div
-                          class="emotion-21"
+                          class="css-14dqn90"
                         >
                           <span
-                            class="emotion-124"
+                            class="css-1erkh45"
                           >
                             Some topic one
                           </span>
@@ -3589,94 +878,94 @@ exports[`Article should render tile and sub title 1`] = `
               </div>
             </div>
             <div
-              class="emotion-9"
+              class="css-gxh9kv"
             >
               <hr
                 aria-hidden="true"
-                class="emotion-30"
+                class="css-633um5"
                 data-testid="divider"
               />
             </div>
           </div>
         </div>
         <div
-          class="emotion-133"
+          class="css-1qobz4o"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-134"
+            class="css-ezeoqu"
             data-testid="Ads"
           >
             <div
-              class="emotion-135"
+              class="css-1dl2ysh"
               id="advert-article-sidebar"
             />
           </div>
           <div
-            class="emotion-117"
+            class="css-38y4ob"
             data-testid="Highlights"
           >
             <div
-              class="emotion-117"
+              class="css-38y4ob"
             >
               <div
-                class="emotion-138"
+                class="css-1ujq44n"
               >
                 <section
-                  class="emotion-139"
+                  class="css-r3v25s"
                 >
                   <h1
-                    class="nk-headline-heading emotion-8"
+                    class="nk-headline-heading css-5gd387"
                   >
                     Highlights
                   </h1>
                 </section>
               </div>
               <div
-                class="emotion-141"
+                class="css-1uo5aiw"
               >
                 <div
-                  class="emotion-142"
+                  class="css-ar93hv"
                 >
                   <div
-                    class="emotion-143"
+                    class="css-krscqv"
                   >
                     <section
-                      class="emotion-139"
+                      class="css-r3v25s"
                     >
                       <h3
-                        class="nk-headline-heading emotion-8"
+                        class="nk-headline-heading css-5gd387"
                       >
                         Highlights
                       </h3>
                     </section>
                   </div>
                   <div
-                    class="emotion-146"
+                    class="css-1h0bvuz"
                   >
                     <a
-                      class="emotion-147"
+                      class="css-1jv78aa"
                       data-testid="buttonLink"
                       href="/"
                     >
                       <div
-                        class="emotion-33"
+                        class="css-bptyib"
                       >
                         <div
-                          class="emotion-34"
+                          class="css-1yztr03"
                         >
                           <span
-                            class="emotion-150"
+                            class="css-3kpoql"
                           >
                             View all
                           </span>
                         </div>
                         <div
-                          class="emotion-34"
+                          class="css-1yztr03"
                         >
                           <svg
                             aria-hidden="true"
-                            class="emotion-152 emotion-25"
+                            class="css-by9y3d-EmotionIconBase ex0cdmw0"
                             fill="currentColor"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -3698,55 +987,55 @@ exports[`Article should render tile and sub title 1`] = `
               </div>
             </div>
             <div
-              class="emotion-120"
+              class="css-14xhfxi"
             >
               <div
-                class="emotion-1"
+                class="css-8atxkm"
               >
                 <div
-                  class="emotion-156"
+                  class="css-1ji12ea"
                 >
                   <div
-                    class="emotion-157"
+                    class="css-3jmwfs"
                   >
                     <div
-                      class="emotion-120"
+                      class="css-14xhfxi"
                       data-testid="HighlightsHorizontalCard"
                     >
                       <div
-                        class="emotion-159"
+                        class="css-6c0oh5"
                       >
                         <div
-                          class="emotion-160"
+                          class="css-14avdtw"
                         >
                           <picture
-                            class="emotion-161"
+                            class="css-1a8w4l6"
                           >
                             <div
-                              class="emotion-72"
+                              class="css-5pczz7"
                             />
                             <img
                               alt="Card Media"
-                              class="emotion-163"
+                              class="css-n57idg"
                               src="https://plchldr.co/i/50x50"
                             />
                           </picture>
                         </div>
                         <div
-                          class="emotion-164"
+                          class="css-1r2lt0d"
                         >
                           <div
-                            class="emotion-165"
+                            class="css-h6wt93"
                           >
                             <a
-                              class="nk-card-link emotion-166"
-                              href="undefined"
+                              class="nk-card-link css-1cq1vxv"
+                              href="https://newskit-render.ceng-dev.newsuk.tech"
                             >
                               <section
-                                class="emotion-167"
+                                class="css-1mwgn7o"
                               >
                                 <h4
-                                  class="nk-headline-heading emotion-168"
+                                  class="nk-headline-heading css-10swdqn"
                                 >
                                   Test Box
                                 </h4>
@@ -3758,46 +1047,46 @@ exports[`Article should render tile and sub title 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-157"
+                    class="css-3jmwfs"
                   >
                     <div
-                      class="emotion-120"
+                      class="css-14xhfxi"
                       data-testid="HighlightsHorizontalCard"
                     >
                       <div
-                        class="emotion-159"
+                        class="css-6c0oh5"
                       >
                         <div
-                          class="emotion-160"
+                          class="css-14avdtw"
                         >
                           <picture
-                            class="emotion-161"
+                            class="css-1a8w4l6"
                           >
                             <div
-                              class="emotion-72"
+                              class="css-5pczz7"
                             />
                             <img
                               alt="Card Media"
-                              class="emotion-163"
+                              class="css-n57idg"
                               src="https://plchldr.co/i/50x50"
                             />
                           </picture>
                         </div>
                         <div
-                          class="emotion-164"
+                          class="css-1r2lt0d"
                         >
                           <div
-                            class="emotion-165"
+                            class="css-h6wt93"
                           >
                             <a
-                              class="nk-card-link emotion-166"
-                              href="undefined"
+                              class="nk-card-link css-1cq1vxv"
+                              href="https://newskit-render.ceng-dev.newsuk.tech"
                             >
                               <section
-                                class="emotion-167"
+                                class="css-1mwgn7o"
                               >
                                 <h4
-                                  class="nk-headline-heading emotion-168"
+                                  class="nk-headline-heading css-10swdqn"
                                 >
                                   Prince Harry
                                 </h4>
@@ -3809,45 +1098,45 @@ exports[`Article should render tile and sub title 1`] = `
                     </div>
                   </div>
                   <div
-                    class="emotion-181"
+                    class="css-6gys8z"
                   >
                     <div
-                      class="emotion-138"
+                      class="css-1ujq44n"
                     >
                       <hr
                         aria-hidden="true"
-                        class="emotion-30"
+                        class="css-633um5"
                         data-testid="divider"
                       />
                       <div
-                        class="emotion-184"
+                        class="css-1c2ypzx"
                       >
                         <div
-                          class="emotion-185"
+                          class="css-le9csr"
                         >
                           <a
-                            class="emotion-147"
+                            class="css-1jv78aa"
                             data-testid="buttonLink"
                             href="/"
                           >
                             <div
-                              class="emotion-33"
+                              class="css-bptyib"
                             >
                               <div
-                                class="emotion-34"
+                                class="css-1yztr03"
                               >
                                 <span
-                                  class="emotion-150"
+                                  class="css-3kpoql"
                                 >
                                   View all
                                 </span>
                               </div>
                               <div
-                                class="emotion-34"
+                                class="css-1yztr03"
                               >
                                 <svg
                                   aria-hidden="true"
-                                  class="emotion-152 emotion-25"
+                                  class="css-by9y3d-EmotionIconBase ex0cdmw0"
                                   fill="currentColor"
                                   focusable="false"
                                   viewBox="0 0 24 24"
@@ -3867,7 +1156,7 @@ exports[`Article should render tile and sub title 1`] = `
                         </div>
                         <hr
                           aria-hidden="true"
-                          class="emotion-30"
+                          class="css-633um5"
                           data-testid="divider"
                         />
                       </div>
@@ -3879,58 +1168,58 @@ exports[`Article should render tile and sub title 1`] = `
           </div>
         </div>
         <div
-          class="emotion-3"
+          class="css-18d6eiw"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-15"
+            class="css-30qa7x"
             data-testid="RelatedArticles"
           >
             <div
-              class="emotion-9"
+              class="css-gxh9kv"
             >
               <div
-                class="emotion-142"
+                class="css-ar93hv"
               >
                 <div
-                  class="emotion-143"
+                  class="css-krscqv"
                 >
                   <section
-                    class="emotion-199"
+                    class="css-148i9wz"
                   >
                     <h3
-                      class="nk-headline-heading emotion-8"
+                      class="nk-headline-heading css-5gd387"
                     >
                       Related
                     </h3>
                   </section>
                 </div>
                 <div
-                  class="emotion-146"
+                  class="css-1h0bvuz"
                 >
                   <a
-                    class="emotion-147"
+                    class="css-1jv78aa"
                     data-testid="buttonLink"
-                    href="/"
+                    href="/relatedArticles"
                   >
                     <div
-                      class="emotion-33"
+                      class="css-bptyib"
                     >
                       <div
-                        class="emotion-34"
+                        class="css-1yztr03"
                       >
                         <span
-                          class="emotion-150"
+                          class="css-3kpoql"
                         >
                           View all
                         </span>
                       </div>
                       <div
-                        class="emotion-34"
+                        class="css-1yztr03"
                       >
                         <svg
                           aria-hidden="true"
-                          class="emotion-152 emotion-25"
+                          class="css-by9y3d-EmotionIconBase ex0cdmw0"
                           fill="currentColor"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -3951,472 +1240,231 @@ exports[`Article should render tile and sub title 1`] = `
               </div>
             </div>
             <div
-              class="emotion-1"
+              class="css-34i7av"
+              data-testid="RelatedArticlesVerticalCard"
             >
               <div
-                class="emotion-156"
+                class="css-16in0m0"
+                data-testid="articleRec-0"
               >
                 <div
-                  class="emotion-211"
-                  data-testid="RelatedArticlesVerticalCard"
+                  class="css-1opc7jp"
                 >
                   <div
-                    class="emotion-212"
+                    class="css-b5xivb"
                   >
-                    <div
-                      class="emotion-213"
+                    <picture
+                      class="css-1t36qhh"
                     >
-                      <picture
-                        class="emotion-214"
-                      >
-                        <div
-                          class="emotion-72"
-                        />
-                        <img
-                          alt="Prince Harry"
-                          class="emotion-73"
-                          src="https://plchldr.co/i/70x50"
-                        />
-                      </picture>
-                    </div>
+                      <div
+                        class="css-5pczz7"
+                      />
+                      <img
+                        alt="Prince Harry"
+                        class="css-1qgqq71"
+                        src="https://plchldr.co/i/70x50"
+                      />
+                    </picture>
+                  </div>
+                  <div
+                    class="css-1shocxe"
+                  >
                     <div
-                      class="emotion-217"
+                      class="css-u3mic"
                     >
                       <div
-                        class="emotion-218"
+                        class="css-38y4ob"
                       >
                         <div
-                          class="emotion-117"
+                          class="css-1vjcmlt"
                         >
-                          <div
-                            class="emotion-220"
+                          <a
+                            class="nk-card-link css-1cq1vxv"
+                            href="https://newskit-render.ceng-dev.newsuk.tech"
                           >
-                            <a
-                              class="nk-card-link emotion-166"
-                              href="undefined"
+                            <section
+                              class="css-zs57uu"
                             >
-                              <section
-                                class="emotion-222"
+                              <h6
+                                class="nk-headline-heading css-10swdqn"
                               >
-                                <h6
-                                  class="nk-headline-heading emotion-168"
-                                >
-                                  Prince Harry
-                                </h6>
-                              </section>
-                            </a>
-                          </div>
-                          <div
-                            class="emotion-220"
+                                Prince Harry
+                              </h6>
+                            </section>
+                          </a>
+                        </div>
+                        <div
+                          class="css-1vjcmlt"
+                        >
+                          <p
+                            class="css-14u46jx"
                           >
-                            <p
-                              class="emotion-225"
-                            >
-                              news
-                            </p>
-                          </div>
+                            news
+                          </p>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
+              </div>
+              <div
+                class="css-16in0m0"
+                data-testid="articleRec-1"
+              >
                 <div
-                  class="emotion-211"
-                  data-testid="RelatedArticlesVerticalCard"
+                  class="css-1opc7jp"
                 >
                   <div
-                    class="emotion-212"
+                    class="css-b5xivb"
                   >
-                    <div
-                      class="emotion-213"
+                    <picture
+                      class="css-1t36qhh"
                     >
-                      <picture
-                        class="emotion-214"
-                      >
-                        <div
-                          class="emotion-72"
-                        />
-                        <img
-                          alt="Meghan Markle"
-                          class="emotion-73"
-                          src="https://plchldr.co/i/70x50"
-                        />
-                      </picture>
-                    </div>
+                      <div
+                        class="css-5pczz7"
+                      />
+                      <img
+                        alt="Meghan Markle"
+                        class="css-1qgqq71"
+                        src="https://plchldr.co/i/70x50"
+                      />
+                    </picture>
+                  </div>
+                  <div
+                    class="css-1shocxe"
+                  >
                     <div
-                      class="emotion-217"
+                      class="css-u3mic"
                     >
                       <div
-                        class="emotion-218"
+                        class="css-38y4ob"
                       >
                         <div
-                          class="emotion-117"
+                          class="css-1vjcmlt"
                         >
-                          <div
-                            class="emotion-220"
+                          <a
+                            class="nk-card-link css-1cq1vxv"
+                            href="https://newskit-render.ceng-dev.newsuk.tech"
                           >
-                            <a
-                              class="nk-card-link emotion-166"
-                              href="undefined"
+                            <section
+                              class="css-zs57uu"
                             >
-                              <section
-                                class="emotion-222"
+                              <h6
+                                class="nk-headline-heading css-10swdqn"
                               >
-                                <h6
-                                  class="nk-headline-heading emotion-168"
-                                >
-                                  Meghan Markle
-                                </h6>
-                              </section>
-                            </a>
-                          </div>
-                          <div
-                            class="emotion-220"
+                                Meghan Markle
+                              </h6>
+                            </section>
+                          </a>
+                        </div>
+                        <div
+                          class="css-1vjcmlt"
+                        >
+                          <p
+                            class="css-14u46jx"
                           >
-                            <p
-                              class="emotion-225"
-                            >
-                              news
-                            </p>
-                          </div>
+                            news
+                          </p>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
+              </div>
+            </div>
+            <div
+              class="css-75g92e"
+            >
+              <hr
+                aria-hidden="true"
+                class="css-633um5"
+                data-testid="divider"
+              />
+              <div
+                class="css-1c2ypzx"
+              >
                 <div
-                  class="emotion-181"
+                  class="css-le9csr"
                 >
-                  <div
-                    class="emotion-242"
+                  <a
+                    class="css-1jv78aa"
+                    data-testid="buttonLink"
+                    href="/relatedArticles"
                   >
-                    <hr
-                      aria-hidden="true"
-                      class="emotion-30"
-                      data-testid="divider"
-                    />
                     <div
-                      class="emotion-184"
+                      class="css-bptyib"
                     >
                       <div
-                        class="emotion-185"
+                        class="css-1yztr03"
                       >
-                        <a
-                          class="emotion-147"
-                          data-testid="buttonLink"
-                          href="/"
+                        <span
+                          class="css-3kpoql"
                         >
-                          <div
-                            class="emotion-33"
-                          >
-                            <div
-                              class="emotion-34"
-                            >
-                              <span
-                                class="emotion-150"
-                              >
-                                View all
-                              </span>
-                            </div>
-                            <div
-                              class="emotion-34"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="emotion-152 emotion-25"
-                                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>
-                            </div>
-                          </div>
-                        </a>
+                          View all
+                        </span>
+                      </div>
+                      <div
+                        class="css-1yztr03"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="css-by9y3d-EmotionIconBase ex0cdmw0"
+                          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>
                       </div>
-                      <hr
-                        aria-hidden="true"
-                        class="emotion-30"
-                        data-testid="divider"
-                      />
                     </div>
-                  </div>
+                  </a>
                 </div>
+                <hr
+                  aria-hidden="true"
+                  class="css-633um5"
+                  data-testid="divider"
+                />
               </div>
             </div>
           </div>
         </div>
         <div
-          class="emotion-3"
+          class="css-18d6eiw"
           data-testid="PageLayout"
         >
           <div
-            class="emotion-255"
+            class="css-1jnx2t2"
           />
         </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-a1yn46"
           >
             <svg
-              class="emotion-5"
+              class="css-kgdu16"
               height="48px"
               viewBox="0 0 244 40"
             >
@@ -4440,30 +1488,30 @@ exports[`Article should render tile and sub title 1`] = `
             </svg>
           </div>
           <div
-            class="emotion-4"
+            class="css-a1yn46"
           >
             <hr
               aria-hidden="true"
-              class="emotion-7"
+              class="css-13iiewa"
               data-testid="divider"
             />
           </div>
           <div
-            class="emotion-8"
+            class="css-hx18jh"
           >
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink One"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-one"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink One
                   </span>
@@ -4471,18 +1519,18 @@ exports[`Article should render tile and sub title 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Two"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-two"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Two
                   </span>
@@ -4490,18 +1538,18 @@ exports[`Article should render tile and sub title 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Three"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-three"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Three
                   </span>
@@ -4509,18 +1557,18 @@ exports[`Article should render tile and sub title 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Four"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-four"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Four
                   </span>
@@ -4528,18 +1576,18 @@ exports[`Article should render tile and sub title 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Five"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-five"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Five
                   </span>
@@ -4547,18 +1595,18 @@ exports[`Article should render tile and sub title 1`] = `
               </a>
             </span>
             <span
-              class="emotion-9"
+              class="css-1v0p1qz"
             >
               <a
                 aria-label="NavLink Six"
-                class="emotion-10"
+                class="css-e43kyg"
                 href="/link-six"
               >
                 <span
-                  class="emotion-11"
+                  class="css-17x5lw"
                 >
                   <span
-                    class="emotion-12"
+                    class="css-kxo08d"
                   >
                     NavLink Six
                   </span>
@@ -4567,16 +1615,16 @@ exports[`Article should render tile and sub title 1`] = `
             </span>
           </div>
           <div
-            class="emotion-4"
+            class="css-a1yn46"
           >
             <hr
               aria-hidden="true"
-              class="emotion-7"
+              class="css-13iiewa"
               data-testid="divider"
             />
           </div>
           <p
-            class="emotion-35"
+            class="css-1rn2unv"
           >
             Copyright © YYYY News Corp. All rights reserved.
           </p>