@newskit-render/core 1.13.2 → 1.20.0

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

@@ -4,7 +4,6 @@ exports[`Article should render tile and sub title 1`] = `
 <DocumentFragment>
   .emotion-0 {
   height: 64px;
-  background-color: #0A0A0A;
 }
 
 .emotion-0 a,
@@ -180,50 +179,39 @@ exports[`Article should render tile and sub title 1`] = `
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
-  margin-left: calc(-4px/2);
-  margin-right: calc(-4px/2);
-}
-
-.emotion-7 {
-  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);
 }
 
 @media screen {
-  .emotion-8 {
+  .emotion-7 {
     display: none;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-8 {
+  .emotion-7 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-8 {
+  .emotion-7 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-8 {
+  .emotion-7 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-8 {
+  .emotion-7 {
     display: block;
   }
 }
 
-.emotion-9 {
+.emotion-8 {
   display: inline-block;
   fill: #FFFFFF;
   color: #FFFFFF;
@@ -231,36 +219,36 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen {
-  .emotion-11 {
+  .emotion-9 {
     display: block;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-11 {
+  .emotion-9 {
     display: block;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-11 {
+  .emotion-9 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-11 {
+  .emotion-9 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-11 {
+  .emotion-9 {
     display: none;
   }
 }
 
-.emotion-13 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -286,7 +274,7 @@ exports[`Article should render tile and sub title 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-14 {
+.emotion-12 {
   position: fixed;
   overflow: auto;
   width: 100%;
@@ -299,7 +287,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-14 {
+  .emotion-12 {
     display: block;
     position: relative;
     overflow: auto;
@@ -312,7 +300,7 @@ exports[`Article should render tile and sub title 1`] = `
   }
 }
 
-.emotion-15 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -334,7 +322,7 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-15 {
+  .emotion-13 {
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     -webkit-justify-content: flex-end;
@@ -346,115 +334,56 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-16 {
+  .emotion-14 {
     margin-right: 0;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-16 {
+  .emotion-14 {
     margin-right: 24px;
   }
 }
 
-.emotion-18 {
-  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-19 {
+.emotion-17 {
   margin: 0;
-  padding: 1px 0;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 21px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
   display: inline-block;
   display: block;
 }
 
-.emotion-19::before {
+.emotion-17::before {
   content: '';
+  margin-bottom: -0.391em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
 }
 
-.emotion-19::after {
+.emotion-17::after {
   content: '';
+  margin-top: -0.409em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
-.emotion-29 {
+.emotion-27 {
   margin-right: 24px;
 }
 
-.emotion-30 {
+.emotion-28 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
-  color: #FFFFFF;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  fill: #FFFFFF;
   vertical-align: unset;
   display: inline-block;
 }
 
-.emotion-30:hover:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  fill: #FFFFFF;
-}
-
-.emotion-30:active:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  fill: #FFFFFF;
-}
-
-.emotion-30.emotion-30 {
+.emotion-28.emotion-28 {
   width: 32px;
   height: 32px;
-  color: #FFFFFF;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  fill: #FFFFFF;
-}
-
-.emotion-30.emotion-30:hover:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  fill: #FFFFFF;
-}
-
-.emotion-30.emotion-30:active:not(:disabled) {
-  color: #FFFFFF;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  fill: #FFFFFF;
 }
 
 <div
@@ -475,88 +404,80 @@ exports[`Article should render tile and sub title 1`] = `
             class="emotion-4"
           >
             <a
-              aria-label="Home Page"
+              aria-label="Logo Link"
               class="emotion-5"
               href="/"
             >
               <span
                 class="emotion-6"
               >
-                <span
+                <div
                   class="emotion-7"
                 >
-                  <div
+                  <svg
                     class="emotion-8"
+                    height="40px"
+                    viewBox="0 0 244 40"
                   >
-                    <svg
-                      class="emotion-9"
-                      height="40px"
-                      viewBox="0 0 244 40"
-                    >
-                      <title>
-                        NewsKit Logo
-                      </title>
-                      <path
-                        d="M86.93 34.078V19.006l12.017 15.462a.63.63 0 0 0 .496.243h5.94a.63.63 0 0 0 .629-.633V6.715a.63.63 0 0 0-.629-.633h-6.553a.63.63 0 0 0-.629.633v14.499L86.671 6.326a.63.63 0 0 0-.496-.244h-6.427a.63.63 0 0 0-.629.633v27.363a.63.63 0 0 0 .629.633h6.553a.63.63 0 0 0 .629-.633zm134.203-20.324c2.389 0 4.325-1.947 4.325-4.35s-1.936-4.35-4.325-4.35-4.325 1.947-4.325 4.35 1.936 4.35 4.325 4.35zM120.484 35.185c4.133 0 7.092-1.617 9.192-4.085.112-.132.196-.514-.023-.696l-3.487-2.897c-.267-.222-.691-.111-.819.004-1.437 1.296-2.778 1.881-4.496 1.881-2.401 0-4.151-1.224-4.761-3.631h13.949c.26 0 .821-.208.821-.638v-.953c0-6.487-3.499-12.077-11.067-12.077-6.51 0-11.108 5.1-11.108 11.546v.082c0 6.813 4.882 11.465 11.799 11.465zm3.299-13.444h-7.706c.407-2.421 1.794-3.954 3.832-3.954 2.121 0 3.588 1.533 3.874 3.954zm20.504 12.53l3.366-10.581c.026-.083.115-.129.198-.102.049.016.087.054.102.103l3.289 10.576a.63.63 0 0 0 .601.444h5.737a.63.63 0 0 0 .601-.447l6.399-20.955c.102-.334-.084-.688-.416-.79-.06-.018-.122-.028-.185-.028h-6.102a.63.63 0 0 0-.607.469l-2.7 10.167c-.023.084-.109.135-.193.112-.052-.014-.094-.054-.11-.107l-3.116-10.276a.63.63 0 0 0-.602-.448h-5.409a.63.63 0 0 0-.601.447l-3.114 10.193c-.026.084-.114.13-.197.105-.052-.016-.092-.058-.106-.111L138.5 12.963a.63.63 0 0 0-.608-.473h-6.184a.63.63 0 0 0-.629.633c0 .062.009.124.027.184l6.323 20.955a.63.63 0 0 0 .602.449h5.657a.63.63 0 0 0 .599-.44zm30.749.914c5.364 0 8.981-2.538 8.981-7.411v-.082c0-3.869-2.798-5.483-6.527-6.663l-.25-.078-.253-.077-.255-.076-.258-.075-.259-.074-.69-.212-.285-.09-.205-.066-.197-.065-.189-.064-.181-.063-.116-.042-.113-.041-.109-.041-.106-.041-.102-.041-.098-.041-.095-.041-.045-.021-.089-.042-.085-.042-.082-.042-.039-.021-.076-.043-.071-.043-.068-.044c-.351-.235-.536-.495-.536-.819v-.082c0-.655.61-1.105 1.788-1.105 1.631 0 3.897.677 6.042 1.831l.116.063.017.006.024.007.029.007a.6.6 0 0 0 .034.006l.038.004c.124.009.29-.019.36-.192l.176-.536.147-.454.26-.816.273-.875.224-.726.421-1.38c.067-.22-.02-.337-.088-.391l-.019-.014-.025-.015c-2.353-1.248-5.173-1.93-7.947-1.93-5.08 0-8.819 2.62-8.819 7.329v.082c0 3.759 2.496 5.387 5.915 6.496l.243.077.246.076.248.074.252.073.254.072.256.071.259.07.13.035.55.157.367.106.277.082.198.061.128.04.185.059.118.039.115.039.111.039.107.039.103.039.051.02.097.04.048.02.092.04.088.04.084.041.081.041c.511.268.776.569.776.983v.082c0 .778-.65 1.187-1.991 1.187-2.157 0-4.714-.772-7.12-2.281l-.116-.074-.025-.015-.029-.015-.032-.015c-.106-.044-.251-.065-.332.079l-1.527 4.645-.051.153c-.103.295.109.504.212.565 2.713 1.602 5.831 2.403 8.979 2.403zm20.475-1.265V27.17a.16.16 0 0 1 .041-.106l2.707-2.996c.059-.065.158-.069.223-.011.009.008.017.018.024.028l6.887 10.19a.63.63 0 0 0 .52.277h7.894a.63.63 0 0 0 .519-.99l-10.382-15.267c-.041-.06-.036-.14.012-.194l9.756-11.126c.23-.262.205-.662-.055-.893-.115-.102-.263-.158-.416-.158h-7.614a.63.63 0 0 0-.479.223l-9.36 11.065c-.056.066-.155.075-.222.018-.035-.03-.055-.074-.055-.12V6.557a.63.63 0 0 0-.629-.633h-6.618a.63.63 0 0 0-.63.633V33.92a.63.63 0 0 0 .63.633h6.618a.63.63 0 0 0 .629-.633zm29.554 0V16.93a.63.63 0 0 0-.629-.633h-6.448a.63.63 0 0 0-.629.633v16.99a.63.63 0 0 0 .629.633h6.448a.63.63 0 0 0 .629-.633zm13.423 1.107c1.945 0 3.625-.433 4.951-1.088l.096-.048.026-.014.028-.017c.117-.074.267-.222.267-.559v-5.177c0-.267-.213-.294-.37-.268l-.035.007-.047.013c-.01.003-.019.006-.027.01l-.012.005c-.785.321-1.597.517-2.437.517-1.423 0-2.115-.654-2.115-2.206v-7.36c0-.087.071-.158.158-.158h4.337a.63.63 0 0 0 .629-.633v-4.946a.63.63 0 0 0-.629-.633h-4.337c-.087 0-.158-.071-.158-.158V7.506a.63.63 0 0 0-.629-.633h-6.428a.63.63 0 0 0-.629.633v4.807c0 .087-.07.158-.157.158h-1.816a.63.63 0 0 0-.629.633v4.946a.63.63 0 0 0 .629.633h1.816c.087 0 .157.071.157.158v8.872c0 5.271 2.725 7.314 7.361 7.314z"
-                        fill="#fff"
-                      />
-                      <path
-                        d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                        fill="#aebfff"
-                      />
-                      <path
-                        d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                        fill="#3358cc"
-                      />
-                      <path
-                        d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                        fill="#577ffb"
-                      />
-                    </svg>
-                  </div>
-                </span>
-                <span
-                  class="emotion-7"
+                    <title>
+                      NewsKit Logo
+                    </title>
+                    <path
+                      d="M86.93 34.078V19.006l12.017 15.462a.63.63 0 0 0 .496.243h5.94a.63.63 0 0 0 .629-.633V6.715a.63.63 0 0 0-.629-.633h-6.553a.63.63 0 0 0-.629.633v14.499L86.671 6.326a.63.63 0 0 0-.496-.244h-6.427a.63.63 0 0 0-.629.633v27.363a.63.63 0 0 0 .629.633h6.553a.63.63 0 0 0 .629-.633zm134.203-20.324c2.389 0 4.325-1.947 4.325-4.35s-1.936-4.35-4.325-4.35-4.325 1.947-4.325 4.35 1.936 4.35 4.325 4.35zM120.484 35.185c4.133 0 7.092-1.617 9.192-4.085.112-.132.196-.514-.023-.696l-3.487-2.897c-.267-.222-.691-.111-.819.004-1.437 1.296-2.778 1.881-4.496 1.881-2.401 0-4.151-1.224-4.761-3.631h13.949c.26 0 .821-.208.821-.638v-.953c0-6.487-3.499-12.077-11.067-12.077-6.51 0-11.108 5.1-11.108 11.546v.082c0 6.813 4.882 11.465 11.799 11.465zm3.299-13.444h-7.706c.407-2.421 1.794-3.954 3.832-3.954 2.121 0 3.588 1.533 3.874 3.954zm20.504 12.53l3.366-10.581c.026-.083.115-.129.198-.102.049.016.087.054.102.103l3.289 10.576a.63.63 0 0 0 .601.444h5.737a.63.63 0 0 0 .601-.447l6.399-20.955c.102-.334-.084-.688-.416-.79-.06-.018-.122-.028-.185-.028h-6.102a.63.63 0 0 0-.607.469l-2.7 10.167c-.023.084-.109.135-.193.112-.052-.014-.094-.054-.11-.107l-3.116-10.276a.63.63 0 0 0-.602-.448h-5.409a.63.63 0 0 0-.601.447l-3.114 10.193c-.026.084-.114.13-.197.105-.052-.016-.092-.058-.106-.111L138.5 12.963a.63.63 0 0 0-.608-.473h-6.184a.63.63 0 0 0-.629.633c0 .062.009.124.027.184l6.323 20.955a.63.63 0 0 0 .602.449h5.657a.63.63 0 0 0 .599-.44zm30.749.914c5.364 0 8.981-2.538 8.981-7.411v-.082c0-3.869-2.798-5.483-6.527-6.663l-.25-.078-.253-.077-.255-.076-.258-.075-.259-.074-.69-.212-.285-.09-.205-.066-.197-.065-.189-.064-.181-.063-.116-.042-.113-.041-.109-.041-.106-.041-.102-.041-.098-.041-.095-.041-.045-.021-.089-.042-.085-.042-.082-.042-.039-.021-.076-.043-.071-.043-.068-.044c-.351-.235-.536-.495-.536-.819v-.082c0-.655.61-1.105 1.788-1.105 1.631 0 3.897.677 6.042 1.831l.116.063.017.006.024.007.029.007a.6.6 0 0 0 .034.006l.038.004c.124.009.29-.019.36-.192l.176-.536.147-.454.26-.816.273-.875.224-.726.421-1.38c.067-.22-.02-.337-.088-.391l-.019-.014-.025-.015c-2.353-1.248-5.173-1.93-7.947-1.93-5.08 0-8.819 2.62-8.819 7.329v.082c0 3.759 2.496 5.387 5.915 6.496l.243.077.246.076.248.074.252.073.254.072.256.071.259.07.13.035.55.157.367.106.277.082.198.061.128.04.185.059.118.039.115.039.111.039.107.039.103.039.051.02.097.04.048.02.092.04.088.04.084.041.081.041c.511.268.776.569.776.983v.082c0 .778-.65 1.187-1.991 1.187-2.157 0-4.714-.772-7.12-2.281l-.116-.074-.025-.015-.029-.015-.032-.015c-.106-.044-.251-.065-.332.079l-1.527 4.645-.051.153c-.103.295.109.504.212.565 2.713 1.602 5.831 2.403 8.979 2.403zm20.475-1.265V27.17a.16.16 0 0 1 .041-.106l2.707-2.996c.059-.065.158-.069.223-.011.009.008.017.018.024.028l6.887 10.19a.63.63 0 0 0 .52.277h7.894a.63.63 0 0 0 .519-.99l-10.382-15.267c-.041-.06-.036-.14.012-.194l9.756-11.126c.23-.262.205-.662-.055-.893-.115-.102-.263-.158-.416-.158h-7.614a.63.63 0 0 0-.479.223l-9.36 11.065c-.056.066-.155.075-.222.018-.035-.03-.055-.074-.055-.12V6.557a.63.63 0 0 0-.629-.633h-6.618a.63.63 0 0 0-.63.633V33.92a.63.63 0 0 0 .63.633h6.618a.63.63 0 0 0 .629-.633zm29.554 0V16.93a.63.63 0 0 0-.629-.633h-6.448a.63.63 0 0 0-.629.633v16.99a.63.63 0 0 0 .629.633h6.448a.63.63 0 0 0 .629-.633zm13.423 1.107c1.945 0 3.625-.433 4.951-1.088l.096-.048.026-.014.028-.017c.117-.074.267-.222.267-.559v-5.177c0-.267-.213-.294-.37-.268l-.035.007-.047.013c-.01.003-.019.006-.027.01l-.012.005c-.785.321-1.597.517-2.437.517-1.423 0-2.115-.654-2.115-2.206v-7.36c0-.087.071-.158.158-.158h4.337a.63.63 0 0 0 .629-.633v-4.946a.63.63 0 0 0-.629-.633h-4.337c-.087 0-.158-.071-.158-.158V7.506a.63.63 0 0 0-.629-.633h-6.428a.63.63 0 0 0-.629.633v4.807c0 .087-.07.158-.157.158h-1.816a.63.63 0 0 0-.629.633v4.946a.63.63 0 0 0 .629.633h1.816c.087 0 .157.071.157.158v8.872c0 5.271 2.725 7.314 7.361 7.314z"
+                      fill="#fff"
+                    />
+                    <path
+                      d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
+                      fill="#aebfff"
+                    />
+                    <path
+                      d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
+                      fill="#3358cc"
+                    />
+                    <path
+                      d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
+                      fill="#577ffb"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="emotion-9"
                 >
-                  <div
-                    class="emotion-11"
+                  <svg
+                    class="emotion-8"
+                    height="40px"
+                    viewBox="0 0 244 40"
                   >
-                    <svg
-                      class="emotion-9"
-                      height="40px"
-                      viewBox="0 0 244 40"
-                    >
-                      <title>
-                        NewsKit Logo
-                      </title>
-                      <path
-                        d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                        fill="#aebfff"
-                      />
-                      <path
-                        d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                        fill="#3358cc"
-                      />
-                      <path
-                        d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                        fill="#577ffb"
-                      />
-                    </svg>
-                  </div>
-                </span>
+                    <title>
+                      NewsKit Logo
+                    </title>
+                    <path
+                      d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
+                      fill="#aebfff"
+                    />
+                    <path
+                      d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
+                      fill="#3358cc"
+                    />
+                    <path
+                      d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
+                      fill="#577ffb"
+                    />
+                  </svg>
+                </div>
               </span>
             </a>
             <div
-              class="emotion-13"
+              class="emotion-11"
             >
               <div
-                class="emotion-14"
+                class="emotion-12"
               >
                 <div
-                  class="emotion-15"
+                  class="emotion-13"
                 >
                   <span
-                    class="emotion-16"
+                    class="emotion-14"
                   >
                     <a
                       aria-label="Section One Link"
@@ -564,10 +485,10 @@ exports[`Article should render tile and sub title 1`] = `
                       href="/section-one"
                     >
                       <span
-                        class="emotion-18"
+                        class="emotion-6"
                       >
                         <span
-                          class="emotion-19"
+                          class="emotion-17"
                         >
                           Section One
                         </span>
@@ -575,7 +496,7 @@ exports[`Article should render tile and sub title 1`] = `
                     </a>
                   </span>
                   <span
-                    class="emotion-16"
+                    class="emotion-14"
                   >
                     <a
                       aria-label="Section Two Link"
@@ -583,10 +504,10 @@ exports[`Article should render tile and sub title 1`] = `
                       href="/section-two"
                     >
                       <span
-                        class="emotion-18"
+                        class="emotion-6"
                       >
                         <span
-                          class="emotion-19"
+                          class="emotion-17"
                         >
                           Section Two
                         </span>
@@ -594,7 +515,7 @@ exports[`Article should render tile and sub title 1`] = `
                     </a>
                   </span>
                   <span
-                    class="emotion-16"
+                    class="emotion-14"
                   >
                     <a
                       aria-label="Section Three Link"
@@ -602,10 +523,10 @@ exports[`Article should render tile and sub title 1`] = `
                       href="/section-three"
                     >
                       <span
-                        class="emotion-18"
+                        class="emotion-6"
                       >
                         <span
-                          class="emotion-19"
+                          class="emotion-17"
                         >
                           Section Three
                         </span>
@@ -615,15 +536,15 @@ exports[`Article should render tile and sub title 1`] = `
                 </div>
               </div>
               <div
-                class="emotion-11"
+                class="emotion-9"
               >
                 <div
-                  class="emotion-29"
+                  class="emotion-27"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="Mobile Menu Button"
-                    class="emotion-30 emotion-31"
+                    class="emotion-28 emotion-29"
                     data-testid="mobile-menu-btn"
                     fill="currentColor"
                     focusable="false"
@@ -642,18 +563,6 @@ exports[`Article should render tile and sub title 1`] = `
                   </svg>
                 </div>
               </div>
-              <select>
-                <option
-                  value="LightTheme"
-                >
-                  LightTheme
-                </option>
-                <option
-                  value="DarkTheme"
-                >
-                  DarkTheme
-                </option>
-              </select>
             </div>
           </div>
         </div>
@@ -796,33 +705,26 @@ exports[`Article should render tile and sub title 1`] = `
   margin-bottom: 24px;
 }
 
-.emotion-7 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 767px) {
   .emotion-7 {
     font-family: "Bitter",serif;
     font-size: 28px;
-    line-height: 1.1428571428571428;
+    line-height: 31.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-7::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.22142857142857142em;
   }
 
   .emotion-7::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2839285714285714em;
   }
 }
 
@@ -830,25 +732,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-7 {
     font-family: "Bitter",serif;
     font-size: 36px;
-    line-height: 1.1111111111111112;
+    line-height: 40.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-7::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2055555555555556em;
   }
 
   .emotion-7::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2680555555555556em;
   }
 }
 
@@ -856,25 +755,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-7 {
     font-family: "Bitter",serif;
     font-size: 36px;
-    line-height: 1.1111111111111112;
+    line-height: 40.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-7::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2055555555555556em;
   }
 
   .emotion-7::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2680555555555556em;
   }
 }
 
@@ -882,25 +778,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-7 {
     font-family: "Bitter",serif;
     font-size: 40px;
-    line-height: 1.2;
+    line-height: 45px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-7::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.25em;
   }
 
   .emotion-7::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3125em;
   }
 }
 
@@ -919,33 +812,26 @@ exports[`Article should render tile and sub title 1`] = `
   margin-bottom: 48px;
 }
 
-.emotion-10 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 767px) {
   .emotion-10 {
     font-family: "Bitter",serif;
     font-size: 20px;
-    line-height: 1.2;
+    line-height: 22.5px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-10::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.25em;
   }
 
   .emotion-10::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3125em;
   }
 }
 
@@ -953,25 +839,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-10 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 400;
     letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-10::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-10::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -979,25 +862,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-10 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 400;
     letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-10::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-10::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -1005,25 +885,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-10 {
     font-family: "Bitter",serif;
     font-size: 28px;
-    line-height: 1.1428571428571428;
+    line-height: 31.5px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-10::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.22142857142857142em;
   }
 
   .emotion-10::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2839285714285714em;
   }
 }
 
@@ -1125,13 +1002,13 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-18 {
   margin: 0;
-  padding: 1px 0;
   color: #2E2E2E;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 21px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
   display: inline-block;
 }
 
@@ -1141,18 +1018,14 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-18::before {
   content: '';
+  margin-bottom: -0.391em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
 }
 
 .emotion-18::after {
   content: '';
+  margin-top: -0.409em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
 .emotion-19 {
@@ -1194,30 +1067,12 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-22 {
   margin: 0;
-  padding: 1px 0;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 1.5;
   font-weight: 500;
-  letter-spacing: -0.5px;
-  display: inline-block;
-  display: block;
-}
-
-.emotion-22::before {
-  content: '';
+  letter-spacing: 0;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
-}
-
-.emotion-22::after {
-  content: '';
-  display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
 .emotion-24 {
@@ -1236,13 +1091,13 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-28 {
   margin: 0;
-  padding: 1px 0;
   color: #2E2E2E;
   font-family: "DM Sans",sans-serif;
   font-size: 12px;
-  line-height: 1.6666666666666667;
+  line-height: 18px;
   font-weight: 400;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
   display: inline-block;
   white-space: pre;
 }
@@ -1253,18 +1108,14 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-28::before {
   content: '';
+  margin-bottom: -0.391em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.5145833333333334em;
 }
 
 .emotion-28::after {
   content: '';
+  margin-top: -0.409em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.5145833333333334em;
 }
 
 .emotion-30 {
@@ -1384,27 +1235,26 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 .emotion-38 {
+  margin: 0;
   font-family: "Poppins",sans-serif;
   font-size: 12px;
-  line-height: 1.6666666666666667;
+  line-height: 18px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  display: inline-block;
 }
 
 .emotion-38::before {
   content: '';
+  margin-bottom: -0.403em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.5145833333333334em;
 }
 
 .emotion-38::after {
   content: '';
+  margin-top: -0.4em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.5145833333333334em;
 }
 
 @media screen {
@@ -1494,27 +1344,24 @@ exports[`Article should render tile and sub title 1`] = `
 .emotion-57 {
   font-family: "Poppins",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 21px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
   color: #2E2E2E;
   margin-right: 24px;
 }
 
 .emotion-57::before {
   content: '';
+  margin-bottom: -0.403em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
 }
 
 .emotion-57::after {
   content: '';
+  margin-top: -0.4em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
 .emotion-57 svg {
@@ -1676,7 +1523,6 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-76 {
   margin: 0;
-  padding: 1px 0;
   color: #0A0A0A;
 }
 
@@ -1688,25 +1534,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-76 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
-    line-height: 1.4285714285714286;
+    line-height: 21px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-76::before {
     content: '';
+    margin-bottom: -0.391em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.3955357142857143em;
   }
 
   .emotion-76::after {
     content: '';
+    margin-top: -0.409em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3955357142857143em;
   }
 }
 
@@ -1714,25 +1557,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-76 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
-    line-height: 1.5;
+    line-height: 24px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-76::before {
     content: '';
+    margin-bottom: -0.391em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.43125em;
   }
 
   .emotion-76::after {
     content: '';
+    margin-top: -0.409em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.43125em;
   }
 }
 
@@ -1740,25 +1580,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-76 {
     font-family: "DM Sans",sans-serif;
     font-size: 18px;
-    line-height: 1.5555555555555556;
+    line-height: 27px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-76::before {
     content: '';
+    margin-bottom: -0.391em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.4590277777777778em;
   }
 
   .emotion-76::after {
     content: '';
+    margin-top: -0.409em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.4590277777777778em;
   }
 }
 
@@ -1803,33 +1640,26 @@ exports[`Article should render tile and sub title 1`] = `
   margin-right: calc(32px/2);
 }
 
-.emotion-115 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 767px) {
   .emotion-115 {
     font-family: "Bitter",serif;
     font-size: 20px;
-    line-height: 1.2;
+    line-height: 22.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-115::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.25em;
   }
 
   .emotion-115::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3125em;
   }
 }
 
@@ -1837,25 +1667,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-115 {
     font-family: "Bitter",serif;
     font-size: 22px;
-    line-height: 1.0909090909090908;
+    line-height: 24.75px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-115::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.19545454545454544em;
   }
 
   .emotion-115::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.25795454545454544em;
   }
 }
 
@@ -1863,25 +1690,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-115 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-115::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-115::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -2001,29 +1825,31 @@ exports[`Article should render tile and sub title 1`] = `
   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: 1.6666666666666667;
+    line-height: 18px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-124::before {
     content: '';
+    margin-bottom: -0.403em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.5145833333333334em;
   }
 
   .emotion-124::after {
     content: '';
+    margin-top: -0.4em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.5145833333333334em;
   }
 }
 
@@ -2031,25 +1857,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-124 {
     font-family: "Poppins",sans-serif;
     font-size: 14px;
-    line-height: 1.4285714285714286;
+    line-height: 21px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-124::before {
     content: '';
+    margin-bottom: -0.403em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.3955357142857143em;
   }
 
   .emotion-124::after {
     content: '';
+    margin-top: -0.4em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3955357142857143em;
   }
 }
 
@@ -2057,25 +1880,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-124 {
     font-family: "Poppins",sans-serif;
     font-size: 16px;
-    line-height: 1.5;
+    line-height: 24px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-124::before {
     content: '';
+    margin-bottom: -0.403em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.43125em;
   }
 
   .emotion-124::after {
     content: '';
+    margin-top: -0.4em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.43125em;
   }
 }
 
@@ -2161,33 +1981,26 @@ exports[`Article should render tile and sub title 1`] = `
   }
 }
 
-.emotion-139 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 1439px) {
   .emotion-139 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-139::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-139::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -2195,25 +2008,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-139 {
     font-family: "Bitter",serif;
     font-size: 28px;
-    line-height: 1.1428571428571428;
+    line-height: 31.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-139::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.22142857142857142em;
   }
 
   .emotion-139::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2839285714285714em;
   }
 }
 
@@ -2350,27 +2160,26 @@ exports[`Article should render tile and sub title 1`] = `
 }
 
 .emotion-150 {
+  margin: 0;
   font-family: "Poppins",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 21px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
+  display: inline-block;
 }
 
 .emotion-150::before {
   content: '';
+  margin-bottom: -0.403em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
 }
 
 .emotion-150::after {
   content: '';
+  margin-top: -0.4em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
 .emotion-152 {
@@ -2608,33 +2417,26 @@ exports[`Article should render tile and sub title 1`] = `
   z-index: 1;
 }
 
-.emotion-167 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 1439px) {
   .emotion-167 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-167::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-167::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -2642,25 +2444,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-167 {
     font-family: "Bitter",serif;
     font-size: 20px;
-    line-height: 1.2;
+    line-height: 22.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-167::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.25em;
   }
 
   .emotion-167::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3125em;
   }
 }
 
@@ -2743,33 +2542,26 @@ exports[`Article should render tile and sub title 1`] = `
   align-self: center;
 }
 
-.emotion-199 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 767px) {
   .emotion-199 {
     font-family: "Bitter",serif;
     font-size: 28px;
-    line-height: 1.1428571428571428;
+    line-height: 31.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-199::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.22142857142857142em;
   }
 
   .emotion-199::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2839285714285714em;
   }
 }
 
@@ -2777,25 +2569,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-199 {
     font-family: "Bitter",serif;
     font-size: 32px;
-    line-height: 1.125;
+    line-height: 36px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-199::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.21250000000000002em;
   }
 
   .emotion-199::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.275em;
   }
 }
 
@@ -2803,25 +2592,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-199 {
     font-family: "Bitter",serif;
     font-size: 36px;
-    line-height: 1.1111111111111112;
+    line-height: 40.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-199::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2055555555555556em;
   }
 
   .emotion-199::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2680555555555556em;
   }
 }
 
@@ -2928,33 +2714,26 @@ exports[`Article should render tile and sub title 1`] = `
   }
 }
 
-.emotion-221 {
-  padding: 1px 0px;
-}
-
 @media screen and (max-width: 767px) {
   .emotion-221 {
     font-family: "Bitter",serif;
     font-size: 20px;
-    line-height: 1.2;
+    line-height: 22.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-221::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.25em;
   }
 
   .emotion-221::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3125em;
   }
 }
 
@@ -2962,25 +2741,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-221 {
     font-family: "Bitter",serif;
     font-size: 22px;
-    line-height: 1.0909090909090908;
+    line-height: 24.75px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-221::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.19545454545454544em;
   }
 
   .emotion-221::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.25795454545454544em;
   }
 }
 
@@ -2988,31 +2764,27 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-221 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-221::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-221::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
 .emotion-224 {
   margin: 0;
-  padding: 1px 0;
   color: #0A0A0A;
 }
 
@@ -3024,25 +2796,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-224 {
     font-family: "DM Sans",sans-serif;
     font-size: 14px;
-    line-height: 1.4285714285714286;
+    line-height: 21px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-224::before {
     content: '';
+    margin-bottom: -0.391em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.3955357142857143em;
   }
 
   .emotion-224::after {
     content: '';
+    margin-top: -0.409em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3955357142857143em;
   }
 }
 
@@ -3050,25 +2819,22 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-224 {
     font-family: "DM Sans",sans-serif;
     font-size: 16px;
-    line-height: 1.5;
+    line-height: 24px;
     font-weight: 400;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-224::before {
     content: '';
+    margin-bottom: -0.391em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.43125em;
   }
 
   .emotion-224::after {
     content: '';
+    margin-top: -0.409em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.43125em;
   }
 }
 
@@ -4554,30 +4320,26 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-12 {
   margin: 0;
-  padding: 1px 0;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 21px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
   display: inline-block;
   display: block;
 }
 
 .emotion-12::before {
   content: '';
+  margin-bottom: -0.391em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
 }
 
 .emotion-12::after {
   content: '';
+  margin-top: -0.409em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
 .emotion-35 {
@@ -4585,9 +4347,9 @@ exports[`Article should render tile and sub title 1`] = `
   color: #535353;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 1.5;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
 }
 
 .emotion-35 svg {