@newskit-render/core 0.131.1 → 0.138.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +169 -0
  2. package/README.md +1 -1
  3. package/__pacts__/client.ts +10 -6
  4. package/__tests__/pages/[articleSlug].test.tsx +20 -7
  5. package/__tests__/pages/__snapshots__/home.test.tsx.snap +599 -690
  6. package/__tests__/pages/home.test.tsx +22 -10
  7. package/components/404/404.tsx +9 -5
  8. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +650 -687
  9. package/components/common/NavLink.tsx +4 -3
  10. package/components/footer/__snapshots__/index.test.tsx.snap +15 -23
  11. package/components/header/index.tsx +4 -3
  12. package/components/section/__tests__/ArticleSlice.test.tsx +2 -2
  13. package/components/section/layouts/FallBack.tsx +3 -3
  14. package/components/section/layouts/SectionRow.tsx +4 -3
  15. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +152 -167
  16. package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap +857 -952
  17. package/helpers/addCacheHeaders.ts +8 -0
  18. package/infrastructure/.circleci/config.yml +2 -2
  19. package/jest.config.js +4 -0
  20. package/jest.config.pact.js +3 -2
  21. package/package.json +11 -9
  22. package/pages/[section]/[articleId]/[articleSlug].tsx +11 -4
  23. package/pages/[section]/index.tsx +11 -4
  24. package/pages/api/account/zuora/generate-rsa.ts +5 -0
  25. package/pages/index.tsx +11 -4
  26. package/pages/preview/[articleId]/version/[versionId]/index.tsx +4 -2
  27. package/temp/header.tsx +4 -3
  28. package/tsconfig.json +3 -2
  29. package/helpers/createApolloClient.tsx +0 -28
package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap CHANGED
@@ -52,11 +52,11 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
52
52
 
53
53
  @media screen and (max-width: 767px) {
54
54
  .emotion-4 {
55
- font-family: "Source Serif Pro",serif;
56
- font-size: 32px;
57
- line-height: 1.125;
58
- font-weight: 600;
59
- letter-spacing: 0;
55
+ font-family: "Bitter",serif;
56
+ font-size: 28px;
57
+ line-height: 1.1428571428571428;
58
+ font-weight: 500;
59
+ letter-spacing: -0.5px;
60
60
  }
61
61
 
62
62
  .emotion-4::before {
@@ -64,7 +64,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
64
64
  display: block;
65
65
  height: 0;
66
66
  width: 0;
67
- margin-bottom: -0.09062500000000001em;
67
+ margin-bottom: -0.22142857142857142em;
68
68
  }
69
69
 
70
70
  .emotion-4::after {
@@ -72,17 +72,17 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
72
72
  display: block;
73
73
  height: 0;
74
74
  width: 0;
75
- margin-top: -0.275em;
75
+ margin-top: -0.2839285714285714em;
76
76
  }
77
77
  }
78
78
 
79
79
  @media screen and (min-width: 768px) and (max-width: 1439px) {
80
80
  .emotion-4 {
81
- font-family: "Source Serif Pro",serif;
82
- font-size: 36px;
83
- line-height: 1.1111111111111112;
84
- font-weight: 600;
85
- letter-spacing: 0;
81
+ font-family: "Bitter",serif;
82
+ font-size: 32px;
83
+ line-height: 1.125;
84
+ font-weight: 500;
85
+ letter-spacing: -0.5px;
86
86
  }
87
87
 
88
88
  .emotion-4::before {
@@ -90,7 +90,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
90
90
  display: block;
91
91
  height: 0;
92
92
  width: 0;
93
- margin-bottom: -0.08368055555555559em;
93
+ margin-bottom: -0.21250000000000002em;
94
94
  }
95
95
 
96
96
  .emotion-4::after {
@@ -98,17 +98,17 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
98
98
  display: block;
99
99
  height: 0;
100
100
  width: 0;
101
- margin-top: -0.2680555555555556em;
101
+ margin-top: -0.275em;
102
102
  }
103
103
  }
104
104
 
105
105
  @media screen and (min-width: 1440px) {
106
106
  .emotion-4 {
107
- font-family: "Source Serif Pro",serif;
108
- font-size: 40px;
109
- line-height: 1.1;
110
- font-weight: 600;
111
- letter-spacing: 0;
107
+ font-family: "Bitter",serif;
108
+ font-size: 36px;
109
+ line-height: 1.1111111111111112;
110
+ font-weight: 500;
111
+ letter-spacing: -0.5px;
112
112
  }
113
113
 
114
114
  .emotion-4::before {
@@ -116,7 +116,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
116
116
  display: block;
117
117
  height: 0;
118
118
  width: 0;
119
- margin-bottom: -0.07812500000000006em;
119
+ margin-bottom: -0.2055555555555556em;
120
120
  }
121
121
 
122
122
  .emotion-4::after {
@@ -124,7 +124,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
124
124
  display: block;
125
125
  height: 0;
126
126
  width: 0;
127
- margin-top: -0.26250000000000007em;
127
+ margin-top: -0.2680555555555556em;
128
128
  }
129
129
  }
130
130
 
@@ -132,11 +132,11 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
132
132
  display: inline;
133
133
  font: inherit;
134
134
  margin: 0;
135
- color: #0a0a0a;
135
+ color: #0A0A0A;
136
136
  }
137
137
 
138
138
  .emotion-5 svg {
139
- fill: #0a0a0a;
139
+ fill: #0A0A0A;
140
140
  }
141
141
 
142
142
  @media screen {
@@ -174,11 +174,11 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
174
174
  transition-property: color;
175
175
  transition-duration: 200ms;
176
176
  transition-timing-function: cubic-bezier(0, 0, .5, 1);
177
- color: #0a0a0a;
177
+ color: #0A0A0A;
178
178
  }
179
179
 
180
180
  .emotion-7 svg {
181
- fill: #0a0a0a;
181
+ fill: #0A0A0A;
182
182
  }
183
183
 
184
184
  .emotion-8 {
@@ -214,11 +214,11 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
214
214
  .emotion-10 {
215
215
  margin: 0;
216
216
  padding: 1px 0;
217
- font-family: "Noto Sans",sans-serif;
217
+ font-family: "Poppins",sans-serif;
218
218
  font-size: 14px;
219
219
  line-height: 1.4285714285714286;
220
220
  font-weight: 500;
221
- letter-spacing: 0;
221
+ letter-spacing: -0.5px;
222
222
  display: inline-block;
223
223
  display: block;
224
224
  }
@@ -228,7 +228,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
228
228
  display: block;
229
229
  height: 0;
230
230
  width: 0;
231
- margin-bottom: -0.32678571428571435em;
231
+ margin-bottom: -0.3955357142857143em;
232
232
  }
233
233
 
234
234
  .emotion-10::after {
@@ -236,14 +236,14 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
236
236
  display: block;
237
237
  height: 0;
238
238
  width: 0;
239
- margin-top: -0.4267857142857143em;
239
+ margin-top: -0.3955357142857143em;
240
240
  }
241
241
 
242
242
  .emotion-12 {
243
243
  display: inline-block;
244
244
  vertical-align: middle;
245
245
  overflow: hidden;
246
- fill: #2e2e2e;
246
+ fill: #2E2E2E;
247
247
  vertical-align: unset;
248
248
  display: inline-block;
249
249
  top: 1px;
@@ -361,8 +361,8 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
361
361
  .emotion-18 {
362
362
  box-sizing: border-box;
363
363
  overflow: hidden;
364
- color: #2e2e2e;
365
- background-color: #ffffff;
364
+ color: #2E2E2E;
365
+ background-color: #FFFFFF;
366
366
  position: relative;
367
367
  display: -webkit-box;
368
368
  display: -webkit-flex;
@@ -381,24 +381,21 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
381
381
  }
382
382
 
383
383
  .emotion-20 {
384
- width: 100%;
385
- }
386
-
387
- .emotion-21 {
388
384
  position: relative;
389
385
  width: 100%;
390
386
  display: block;
391
387
  padding-top: 0;
392
388
  height: 0;
389
+ width: 100%;
393
390
  border-radius: 0;
394
- background-color: #fafafa;
391
+ background-color: #F4F4F4;
395
392
  }
396
393
 
397
- .emotion-21 svg {
398
- fill: #c0c0c0;
394
+ .emotion-20 svg {
395
+ fill: #C0C0C0;
399
396
  }
400
397
 
401
- .emotion-22 {
398
+ .emotion-21 {
402
399
  top: 0;
403
400
  left: 0;
404
401
  position: absolute;
@@ -418,7 +415,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
418
415
  margin: 0;
419
416
  }
420
417
 
421
- .emotion-23 {
418
+ .emotion-22 {
422
419
  opacity: 0;
423
420
  display: block;
424
421
  border-radius: inherit;
@@ -429,67 +426,67 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
429
426
  position: absolute;
430
427
  }
431
428
 
432
- .emotion-24 {
429
+ .emotion-23 {
433
430
  box-sizing: border-box;
434
431
  }
435
432
 
436
- .emotion-25 {
433
+ .emotion-24 {
437
434
  box-sizing: border-box;
438
435
  padding: 0;
439
436
  }
440
437
 
441
- .emotion-25 a:not(.nk-card-link) {
438
+ .emotion-24 a:not(.nk-card-link) {
442
439
  z-index: 2;
443
440
  position: relative;
444
441
  }
445
442
 
446
- .emotion-26 {
443
+ .emotion-25 {
447
444
  -webkit-text-decoration: none;
448
445
  text-decoration: none;
449
446
  border: none;
450
447
  }
451
448
 
452
- .emotion-26 .nk-headline-kicker {
453
- color: #0a68c1;
449
+ .emotion-25 .nk-headline-kicker {
450
+ color: #3358CC;
454
451
  }
455
452
 
456
- .emotion-26:hover:not(:disabled) .nk-headline-kicker {
457
- color: #02509b;
453
+ .emotion-25:hover:not(:disabled) .nk-headline-kicker {
454
+ color: #2B4AAB;
458
455
  -webkit-text-decoration: underline;
459
456
  text-decoration: underline;
460
457
  }
461
458
 
462
- .emotion-26:active:not(:disabled) .nk-headline-kicker {
463
- color: #01396e;
459
+ .emotion-25:active:not(:disabled) .nk-headline-kicker {
460
+ color: #213A82;
464
461
  -webkit-text-decoration: underline;
465
462
  text-decoration: underline;
466
463
  }
467
464
 
468
- .emotion-26:visited:not(:disabled) .nk-headline-kicker {
469
- color: #7547a3;
465
+ .emotion-25:visited:not(:disabled) .nk-headline-kicker {
466
+ color: #5E44E4;
470
467
  }
471
468
 
472
- .emotion-26 .nk-headline-heading {
473
- color: #2e2e2e;
469
+ .emotion-25 .nk-headline-heading {
470
+ color: #2E2E2E;
474
471
  }
475
472
 
476
- .emotion-26:hover:not(:disabled) .nk-headline-heading {
477
- color: #02509b;
473
+ .emotion-25:hover:not(:disabled) .nk-headline-heading {
474
+ color: #2B4AAB;
478
475
  -webkit-text-decoration: underline;
479
476
  text-decoration: underline;
480
477
  }
481
478
 
482
- .emotion-26:active:not(:disabled) .nk-headline-heading {
483
- color: #01396e;
479
+ .emotion-25:active:not(:disabled) .nk-headline-heading {
480
+ color: #213A82;
484
481
  -webkit-text-decoration: underline;
485
482
  text-decoration: underline;
486
483
  }
487
484
 
488
- .emotion-26:visited:not(:disabled) .nk-headline-heading {
489
- color: #7547a3;
485
+ .emotion-25:visited:not(:disabled) .nk-headline-heading {
486
+ color: #5E44E4;
490
487
  }
491
488
 
492
- .emotion-26:before {
489
+ .emotion-25:before {
493
490
  content: '';
494
491
  top: 0;
495
492
  right: 0;
@@ -500,38 +497,38 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
500
497
  z-index: 1;
501
498
  }
502
499
 
503
- .emotion-27 {
500
+ .emotion-26 {
504
501
  margin-bottom: 20px;
505
502
  }
506
503
 
507
- .emotion-28 {
504
+ .emotion-27 {
508
505
  margin: 0;
509
506
  padding: 1px 0;
510
- color: #0a0a0a;
507
+ color: #0A0A0A;
511
508
  }
512
509
 
513
- .emotion-28 svg {
514
- fill: #0a0a0a;
510
+ .emotion-27 svg {
511
+ fill: #0A0A0A;
515
512
  }
516
513
 
517
514
  @media screen and (max-width: 767px) {
518
- .emotion-28 {
519
- font-family: "Source Serif Pro",serif;
515
+ .emotion-27 {
516
+ font-family: "Bitter",serif;
520
517
  font-size: 20px;
521
518
  line-height: 1.2;
522
- font-weight: 600;
523
- letter-spacing: 0;
519
+ font-weight: 500;
520
+ letter-spacing: -0.5px;
524
521
  }
525
522
 
526
- .emotion-28::before {
523
+ .emotion-27::before {
527
524
  content: '';
528
525
  display: block;
529
526
  height: 0;
530
527
  width: 0;
531
- margin-bottom: -0.128125em;
528
+ margin-bottom: -0.25em;
532
529
  }
533
530
 
534
- .emotion-28::after {
531
+ .emotion-27::after {
535
532
  content: '';
536
533
  display: block;
537
534
  height: 0;
@@ -541,126 +538,126 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
541
538
  }
542
539
 
543
540
  @media screen and (min-width: 768px) and (max-width: 1439px) {
544
- .emotion-28 {
545
- font-family: "Source Serif Pro",serif;
546
- font-size: 24px;
547
- line-height: 1.1666666666666667;
548
- font-weight: 600;
549
- letter-spacing: 0;
541
+ .emotion-27 {
542
+ font-family: "Bitter",serif;
543
+ font-size: 22px;
544
+ line-height: 1.0909090909090908;
545
+ font-weight: 500;
546
+ letter-spacing: -0.5px;
550
547
  }
551
548
 
552
- .emotion-28::before {
549
+ .emotion-27::before {
553
550
  content: '';
554
551
  display: block;
555
552
  height: 0;
556
553
  width: 0;
557
- margin-bottom: -0.11145833333333338em;
554
+ margin-bottom: -0.19545454545454544em;
558
555
  }
559
556
 
560
- .emotion-28::after {
557
+ .emotion-27::after {
561
558
  content: '';
562
559
  display: block;
563
560
  height: 0;
564
561
  width: 0;
565
- margin-top: -0.2958333333333334em;
562
+ margin-top: -0.25795454545454544em;
566
563
  }
567
564
  }
568
565
 
569
566
  @media screen and (min-width: 1440px) {
570
- .emotion-28 {
571
- font-family: "Source Serif Pro",serif;
572
- font-size: 28px;
573
- line-height: 1.1428571428571428;
574
- font-weight: 600;
575
- letter-spacing: 0;
567
+ .emotion-27 {
568
+ font-family: "Bitter",serif;
569
+ font-size: 24px;
570
+ line-height: 1.1666666666666667;
571
+ font-weight: 500;
572
+ letter-spacing: -0.5px;
576
573
  }
577
574
 
578
- .emotion-28::before {
575
+ .emotion-27::before {
579
576
  content: '';
580
577
  display: block;
581
578
  height: 0;
582
579
  width: 0;
583
- margin-bottom: -0.09955357142857141em;
580
+ margin-bottom: -0.2333333333333334em;
584
581
  }
585
582
 
586
- .emotion-28::after {
583
+ .emotion-27::after {
587
584
  content: '';
588
585
  display: block;
589
586
  height: 0;
590
587
  width: 0;
591
- margin-top: -0.2839285714285714em;
588
+ margin-top: -0.2958333333333334em;
592
589
  }
593
590
  }
594
591
 
595
- .emotion-29 {
592
+ .emotion-28 {
596
593
  margin-bottom: 12px;
597
594
  }
598
595
 
599
- .emotion-30 {
596
+ .emotion-29 {
600
597
  margin: 0;
601
598
  padding: 1px 0;
602
- color: #0a0a0a;
599
+ color: #0A0A0A;
603
600
  }
604
601
 
605
- .emotion-30 svg {
606
- fill: #0a0a0a;
602
+ .emotion-29 svg {
603
+ fill: #0A0A0A;
607
604
  }
608
605
 
609
606
  @media screen and (max-width: 767px) {
610
- .emotion-30 {
611
- font-family: "Noto Sans",sans-serif;
607
+ .emotion-29 {
608
+ font-family: "DM Sans",sans-serif;
612
609
  font-size: 14px;
613
610
  line-height: 1.4285714285714286;
614
611
  font-weight: 400;
615
- letter-spacing: 0;
612
+ letter-spacing: -0.5px;
616
613
  }
617
614
 
618
- .emotion-30::before {
615
+ .emotion-29::before {
619
616
  content: '';
620
617
  display: block;
621
618
  height: 0;
622
619
  width: 0;
623
- margin-bottom: -0.32678571428571435em;
620
+ margin-bottom: -0.3955357142857143em;
624
621
  }
625
622
 
626
- .emotion-30::after {
623
+ .emotion-29::after {
627
624
  content: '';
628
625
  display: block;
629
626
  height: 0;
630
627
  width: 0;
631
- margin-top: -0.4267857142857143em;
628
+ margin-top: -0.3955357142857143em;
632
629
  }
633
630
  }
634
631
 
635
632
  @media screen and (min-width: 768px) {
636
- .emotion-30 {
637
- font-family: "Noto Sans",sans-serif;
633
+ .emotion-29 {
634
+ font-family: "DM Sans",sans-serif;
638
635
  font-size: 16px;
639
636
  line-height: 1.5;
640
637
  font-weight: 400;
641
- letter-spacing: 0;
638
+ letter-spacing: -0.5px;
642
639
  }
643
640
 
644
- .emotion-30::before {
641
+ .emotion-29::before {
645
642
  content: '';
646
643
  display: block;
647
644
  height: 0;
648
645
  width: 0;
649
- margin-bottom: -0.36250000000000004em;
646
+ margin-bottom: -0.43125em;
650
647
  }
651
648
 
652
- .emotion-30::after {
649
+ .emotion-29::after {
653
650
  content: '';
654
651
  display: block;
655
652
  height: 0;
656
653
  width: 0;
657
- margin-top: -0.4625em;
654
+ margin-top: -0.43125em;
658
655
  }
659
656
  }
660
657
 
661
- .emotion-73 {
658
+ .emotion-69 {
662
659
  border-style: solid;
663
- border-color: #e4e4e4;
660
+ border-color: #DEDEDE;
664
661
  border-width: 1px;
665
662
  border-width: 0px;
666
663
  margin: 0;
@@ -755,47 +752,43 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
755
752
  <div
756
753
  class="emotion-19"
757
754
  >
758
- <div
755
+ <picture
759
756
  class="emotion-20"
760
757
  >
761
- <picture
758
+ <div
762
759
  class="emotion-21"
763
- >
764
- <div
765
- class="emotion-22"
766
- />
767
- <img
768
- alt="image alt"
769
- class="emotion-23"
770
- src="some-url-to-image"
771
- />
772
- </picture>
773
- </div>
760
+ />
761
+ <img
762
+ alt="image alt"
763
+ class="emotion-22"
764
+ src="some-url-to-image"
765
+ />
766
+ </picture>
774
767
  </div>
775
768
  <div
776
- class="emotion-24"
769
+ class="emotion-23"
777
770
  >
778
771
  <div
779
- class="emotion-25"
772
+ class="emotion-24"
780
773
  >
781
774
  <a
782
- class="nk-card-link emotion-26"
775
+ class="nk-card-link emotion-25"
783
776
  href="catagory-one/demo-1/test-headline"
784
777
  >
785
778
  <div
786
- class="emotion-27"
779
+ class="emotion-26"
787
780
  >
788
781
  <h3
789
- class="emotion-28"
782
+ class="emotion-27"
790
783
  >
791
784
  test headline
792
785
  </h3>
793
786
  </div>
794
787
  <div
795
- class="emotion-29"
788
+ class="emotion-28"
796
789
  >
797
790
  <p
798
- class="emotion-30"
791
+ class="emotion-29"
799
792
  >
800
793
  teaser test text
801
794
  </p>
@@ -815,47 +808,43 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
815
808
  <div
816
809
  class="emotion-19"
817
810
  >
818
- <div
811
+ <picture
819
812
  class="emotion-20"
820
813
  >
821
- <picture
814
+ <div
822
815
  class="emotion-21"
823
- >
824
- <div
825
- class="emotion-22"
826
- />
827
- <img
828
- alt="image alt 2"
829
- class="emotion-23"
830
- src="some-url-to-image"
831
- />
832
- </picture>
833
- </div>
816
+ />
817
+ <img
818
+ alt="image alt 2"
819
+ class="emotion-22"
820
+ src="some-url-to-image"
821
+ />
822
+ </picture>
834
823
  </div>
835
824
  <div
836
- class="emotion-24"
825
+ class="emotion-23"
837
826
  >
838
827
  <div
839
- class="emotion-25"
828
+ class="emotion-24"
840
829
  >
841
830
  <a
842
- class="nk-card-link emotion-26"
831
+ class="nk-card-link emotion-25"
843
832
  href="catagory-two/demo-2/test-headline-2"
844
833
  >
845
834
  <div
846
- class="emotion-27"
835
+ class="emotion-26"
847
836
  >
848
837
  <h3
849
- class="emotion-28"
838
+ class="emotion-27"
850
839
  >
851
840
  test headline 2
852
841
  </h3>
853
842
  </div>
854
843
  <div
855
- class="emotion-29"
844
+ class="emotion-28"
856
845
  >
857
846
  <p
858
- class="emotion-30"
847
+ class="emotion-29"
859
848
  >
860
849
  teaser test text 2
861
850
  </p>
@@ -875,47 +864,43 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
875
864
  <div
876
865
  class="emotion-19"
877
866
  >
878
- <div
867
+ <picture
879
868
  class="emotion-20"
880
869
  >
881
- <picture
870
+ <div
882
871
  class="emotion-21"
883
- >
884
- <div
885
- class="emotion-22"
886
- />
887
- <img
888
- alt="image alt 3"
889
- class="emotion-23"
890
- src="some-url-to-image"
891
- />
892
- </picture>
893
- </div>
872
+ />
873
+ <img
874
+ alt="image alt 3"
875
+ class="emotion-22"
876
+ src="some-url-to-image"
877
+ />
878
+ </picture>
894
879
  </div>
895
880
  <div
896
- class="emotion-24"
881
+ class="emotion-23"
897
882
  >
898
883
  <div
899
- class="emotion-25"
884
+ class="emotion-24"
900
885
  >
901
886
  <a
902
- class="nk-card-link emotion-26"
887
+ class="nk-card-link emotion-25"
903
888
  href="catagory-three/demo-3/test-headline-3"
904
889
  >
905
890
  <div
906
- class="emotion-27"
891
+ class="emotion-26"
907
892
  >
908
893
  <h3
909
- class="emotion-28"
894
+ class="emotion-27"
910
895
  >
911
896
  test headline 3
912
897
  </h3>
913
898
  </div>
914
899
  <div
915
- class="emotion-29"
900
+ class="emotion-28"
916
901
  >
917
902
  <p
918
- class="emotion-30"
903
+ class="emotion-29"
919
904
  >
920
905
  teaser test text 3
921
906
  </p>
@@ -935,47 +920,43 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
935
920
  <div
936
921
  class="emotion-19"
937
922
  >
938
- <div
923
+ <picture
939
924
  class="emotion-20"
940
925
  >
941
- <picture
926
+ <div
942
927
  class="emotion-21"
943
- >
944
- <div
945
- class="emotion-22"
946
- />
947
- <img
948
- alt="image alt 3"
949
- class="emotion-23"
950
- src="some-url-to-image"
951
- />
952
- </picture>
953
- </div>
928
+ />
929
+ <img
930
+ alt="image alt 3"
931
+ class="emotion-22"
932
+ src="some-url-to-image"
933
+ />
934
+ </picture>
954
935
  </div>
955
936
  <div
956
- class="emotion-24"
937
+ class="emotion-23"
957
938
  >
958
939
  <div
959
- class="emotion-25"
940
+ class="emotion-24"
960
941
  >
961
942
  <a
962
- class="nk-card-link emotion-26"
943
+ class="nk-card-link emotion-25"
963
944
  href="catagory-four/demo-4/test-headline-4"
964
945
  >
965
946
  <div
966
- class="emotion-27"
947
+ class="emotion-26"
967
948
  >
968
949
  <h3
969
- class="emotion-28"
950
+ class="emotion-27"
970
951
  >
971
952
  test headline 4
972
953
  </h3>
973
954
  </div>
974
955
  <div
975
- class="emotion-29"
956
+ class="emotion-28"
976
957
  >
977
958
  <p
978
- class="emotion-30"
959
+ class="emotion-29"
979
960
  >
980
961
  teaser test text 4
981
962
  </p>
@@ -990,7 +971,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
990
971
  </div>
991
972
  <hr
992
973
  aria-hidden="true"
993
- class="emotion-73"
974
+ class="emotion-69"
994
975
  data-testid="divider"
995
976
  />
996
977
  </div>
@@ -1000,12 +981,12 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
1000
981
  exports[`SectionRow SectionRow isDarkBackground 1`] = `
1001
982
  <DocumentFragment>
1002
983
  .emotion-0 {
1003
- background:color: #f0f0f0;
984
+ background:color: #F4F4F4;
1004
985
  }
1005
986
 
1006
987
  .emotion-1 {
1007
988
  margin-bottom: 32px;
1008
- background: #0a68c1;
989
+ background: #3358CC;
1009
990
  }
1010
991
 
1011
992
  .emotion-2 {
@@ -1049,11 +1030,11 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1049
1030
 
1050
1031
  @media screen and (max-width: 767px) {
1051
1032
  .emotion-4 {
1052
- font-family: "Source Serif Pro",serif;
1053
- font-size: 32px;
1054
- line-height: 1.125;
1055
- font-weight: 600;
1056
- letter-spacing: 0;
1033
+ font-family: "Bitter",serif;
1034
+ font-size: 28px;
1035
+ line-height: 1.1428571428571428;
1036
+ font-weight: 500;
1037
+ letter-spacing: -0.5px;
1057
1038
  }
1058
1039
 
1059
1040
  .emotion-4::before {
@@ -1061,7 +1042,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1061
1042
  display: block;
1062
1043
  height: 0;
1063
1044
  width: 0;
1064
- margin-bottom: -0.09062500000000001em;
1045
+ margin-bottom: -0.22142857142857142em;
1065
1046
  }
1066
1047
 
1067
1048
  .emotion-4::after {
@@ -1069,17 +1050,17 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1069
1050
  display: block;
1070
1051
  height: 0;
1071
1052
  width: 0;
1072
- margin-top: -0.275em;
1053
+ margin-top: -0.2839285714285714em;
1073
1054
  }
1074
1055
  }
1075
1056
 
1076
1057
  @media screen and (min-width: 768px) and (max-width: 1439px) {
1077
1058
  .emotion-4 {
1078
- font-family: "Source Serif Pro",serif;
1079
- font-size: 36px;
1080
- line-height: 1.1111111111111112;
1081
- font-weight: 600;
1082
- letter-spacing: 0;
1059
+ font-family: "Bitter",serif;
1060
+ font-size: 32px;
1061
+ line-height: 1.125;
1062
+ font-weight: 500;
1063
+ letter-spacing: -0.5px;
1083
1064
  }
1084
1065
 
1085
1066
  .emotion-4::before {
@@ -1087,7 +1068,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1087
1068
  display: block;
1088
1069
  height: 0;
1089
1070
  width: 0;
1090
- margin-bottom: -0.08368055555555559em;
1071
+ margin-bottom: -0.21250000000000002em;
1091
1072
  }
1092
1073
 
1093
1074
  .emotion-4::after {
@@ -1095,17 +1076,17 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1095
1076
  display: block;
1096
1077
  height: 0;
1097
1078
  width: 0;
1098
- margin-top: -0.2680555555555556em;
1079
+ margin-top: -0.275em;
1099
1080
  }
1100
1081
  }
1101
1082
 
1102
1083
  @media screen and (min-width: 1440px) {
1103
1084
  .emotion-4 {
1104
- font-family: "Source Serif Pro",serif;
1105
- font-size: 40px;
1106
- line-height: 1.1;
1107
- font-weight: 600;
1108
- letter-spacing: 0;
1085
+ font-family: "Bitter",serif;
1086
+ font-size: 36px;
1087
+ line-height: 1.1111111111111112;
1088
+ font-weight: 500;
1089
+ letter-spacing: -0.5px;
1109
1090
  }
1110
1091
 
1111
1092
  .emotion-4::before {
@@ -1113,7 +1094,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1113
1094
  display: block;
1114
1095
  height: 0;
1115
1096
  width: 0;
1116
- margin-bottom: -0.07812500000000006em;
1097
+ margin-bottom: -0.2055555555555556em;
1117
1098
  }
1118
1099
 
1119
1100
  .emotion-4::after {
@@ -1121,7 +1102,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1121
1102
  display: block;
1122
1103
  height: 0;
1123
1104
  width: 0;
1124
- margin-top: -0.26250000000000007em;
1105
+ margin-top: -0.2680555555555556em;
1125
1106
  }
1126
1107
  }
1127
1108
 
@@ -1129,11 +1110,11 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1129
1110
  display: inline;
1130
1111
  font: inherit;
1131
1112
  margin: 0;
1132
- color: #ffffff;
1113
+ color: #FFFFFF;
1133
1114
  }
1134
1115
 
1135
1116
  .emotion-5 svg {
1136
- fill: #ffffff;
1117
+ fill: #FFFFFF;
1137
1118
  }
1138
1119
 
1139
1120
  @media screen {
@@ -1171,11 +1152,11 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1171
1152
  transition-property: color;
1172
1153
  transition-duration: 200ms;
1173
1154
  transition-timing-function: cubic-bezier(0, 0, .5, 1);
1174
- color: #ffffff;
1155
+ color: #FFFFFF;
1175
1156
  }
1176
1157
 
1177
1158
  .emotion-7 svg {
1178
- fill: #ffffff;
1159
+ fill: #FFFFFF;
1179
1160
  }
1180
1161
 
1181
1162
  .emotion-8 {
@@ -1211,11 +1192,11 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1211
1192
  .emotion-10 {
1212
1193
  margin: 0;
1213
1194
  padding: 1px 0;
1214
- font-family: "Noto Sans",sans-serif;
1195
+ font-family: "Poppins",sans-serif;
1215
1196
  font-size: 14px;
1216
1197
  line-height: 1.4285714285714286;
1217
1198
  font-weight: 500;
1218
- letter-spacing: 0;
1199
+ letter-spacing: -0.5px;
1219
1200
  display: inline-block;
1220
1201
  display: block;
1221
1202
  }
@@ -1225,7 +1206,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1225
1206
  display: block;
1226
1207
  height: 0;
1227
1208
  width: 0;
1228
- margin-bottom: -0.32678571428571435em;
1209
+ margin-bottom: -0.3955357142857143em;
1229
1210
  }
1230
1211
 
1231
1212
  .emotion-10::after {
@@ -1233,14 +1214,14 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1233
1214
  display: block;
1234
1215
  height: 0;
1235
1216
  width: 0;
1236
- margin-top: -0.4267857142857143em;
1217
+ margin-top: -0.3955357142857143em;
1237
1218
  }
1238
1219
 
1239
1220
  .emotion-12 {
1240
1221
  display: inline-block;
1241
1222
  vertical-align: middle;
1242
1223
  overflow: hidden;
1243
- fill: #2e2e2e;
1224
+ fill: #2E2E2E;
1244
1225
  vertical-align: unset;
1245
1226
  display: inline-block;
1246
1227
  top: 1px;
@@ -1358,8 +1339,8 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1358
1339
  .emotion-18 {
1359
1340
  box-sizing: border-box;
1360
1341
  overflow: hidden;
1361
- color: #2e2e2e;
1362
- background-color: #ffffff;
1342
+ color: #2E2E2E;
1343
+ background-color: #FFFFFF;
1363
1344
  position: relative;
1364
1345
  display: -webkit-box;
1365
1346
  display: -webkit-flex;
@@ -1378,24 +1359,21 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1378
1359
  }
1379
1360
 
1380
1361
  .emotion-20 {
1381
- width: 100%;
1382
- }
1383
-
1384
- .emotion-21 {
1385
1362
  position: relative;
1386
1363
  width: 100%;
1387
1364
  display: block;
1388
1365
  padding-top: 0;
1389
1366
  height: 0;
1367
+ width: 100%;
1390
1368
  border-radius: 0;
1391
- background-color: #fafafa;
1369
+ background-color: #F4F4F4;
1392
1370
  }
1393
1371
 
1394
- .emotion-21 svg {
1395
- fill: #c0c0c0;
1372
+ .emotion-20 svg {
1373
+ fill: #C0C0C0;
1396
1374
  }
1397
1375
 
1398
- .emotion-22 {
1376
+ .emotion-21 {
1399
1377
  top: 0;
1400
1378
  left: 0;
1401
1379
  position: absolute;
@@ -1415,7 +1393,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1415
1393
  margin: 0;
1416
1394
  }
1417
1395
 
1418
- .emotion-23 {
1396
+ .emotion-22 {
1419
1397
  opacity: 0;
1420
1398
  display: block;
1421
1399
  border-radius: inherit;
@@ -1426,67 +1404,67 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1426
1404
  position: absolute;
1427
1405
  }
1428
1406
 
1429
- .emotion-24 {
1407
+ .emotion-23 {
1430
1408
  box-sizing: border-box;
1431
1409
  }
1432
1410
 
1433
- .emotion-25 {
1411
+ .emotion-24 {
1434
1412
  box-sizing: border-box;
1435
1413
  padding: 0;
1436
1414
  }
1437
1415
 
1438
- .emotion-25 a:not(.nk-card-link) {
1416
+ .emotion-24 a:not(.nk-card-link) {
1439
1417
  z-index: 2;
1440
1418
  position: relative;
1441
1419
  }
1442
1420
 
1443
- .emotion-26 {
1421
+ .emotion-25 {
1444
1422
  -webkit-text-decoration: none;
1445
1423
  text-decoration: none;
1446
1424
  border: none;
1447
1425
  }
1448
1426
 
1449
- .emotion-26 .nk-headline-kicker {
1450
- color: #0a68c1;
1427
+ .emotion-25 .nk-headline-kicker {
1428
+ color: #3358CC;
1451
1429
  }
1452
1430
 
1453
- .emotion-26:hover:not(:disabled) .nk-headline-kicker {
1454
- color: #02509b;
1431
+ .emotion-25:hover:not(:disabled) .nk-headline-kicker {
1432
+ color: #2B4AAB;
1455
1433
  -webkit-text-decoration: underline;
1456
1434
  text-decoration: underline;
1457
1435
  }
1458
1436
 
1459
- .emotion-26:active:not(:disabled) .nk-headline-kicker {
1460
- color: #01396e;
1437
+ .emotion-25:active:not(:disabled) .nk-headline-kicker {
1438
+ color: #213A82;
1461
1439
  -webkit-text-decoration: underline;
1462
1440
  text-decoration: underline;
1463
1441
  }
1464
1442
 
1465
- .emotion-26:visited:not(:disabled) .nk-headline-kicker {
1466
- color: #7547a3;
1443
+ .emotion-25:visited:not(:disabled) .nk-headline-kicker {
1444
+ color: #5E44E4;
1467
1445
  }
1468
1446
 
1469
- .emotion-26 .nk-headline-heading {
1470
- color: #2e2e2e;
1447
+ .emotion-25 .nk-headline-heading {
1448
+ color: #2E2E2E;
1471
1449
  }
1472
1450
 
1473
- .emotion-26:hover:not(:disabled) .nk-headline-heading {
1474
- color: #02509b;
1451
+ .emotion-25:hover:not(:disabled) .nk-headline-heading {
1452
+ color: #2B4AAB;
1475
1453
  -webkit-text-decoration: underline;
1476
1454
  text-decoration: underline;
1477
1455
  }
1478
1456
 
1479
- .emotion-26:active:not(:disabled) .nk-headline-heading {
1480
- color: #01396e;
1457
+ .emotion-25:active:not(:disabled) .nk-headline-heading {
1458
+ color: #213A82;
1481
1459
  -webkit-text-decoration: underline;
1482
1460
  text-decoration: underline;
1483
1461
  }
1484
1462
 
1485
- .emotion-26:visited:not(:disabled) .nk-headline-heading {
1486
- color: #7547a3;
1463
+ .emotion-25:visited:not(:disabled) .nk-headline-heading {
1464
+ color: #5E44E4;
1487
1465
  }
1488
1466
 
1489
- .emotion-26:before {
1467
+ .emotion-25:before {
1490
1468
  content: '';
1491
1469
  top: 0;
1492
1470
  right: 0;
@@ -1497,38 +1475,38 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1497
1475
  z-index: 1;
1498
1476
  }
1499
1477
 
1500
- .emotion-27 {
1478
+ .emotion-26 {
1501
1479
  margin-bottom: 20px;
1502
1480
  }
1503
1481
 
1504
- .emotion-28 {
1482
+ .emotion-27 {
1505
1483
  margin: 0;
1506
1484
  padding: 1px 0;
1507
- color: #0a0a0a;
1485
+ color: #0A0A0A;
1508
1486
  }
1509
1487
 
1510
- .emotion-28 svg {
1511
- fill: #0a0a0a;
1488
+ .emotion-27 svg {
1489
+ fill: #0A0A0A;
1512
1490
  }
1513
1491
 
1514
1492
  @media screen and (max-width: 767px) {
1515
- .emotion-28 {
1516
- font-family: "Source Serif Pro",serif;
1493
+ .emotion-27 {
1494
+ font-family: "Bitter",serif;
1517
1495
  font-size: 20px;
1518
1496
  line-height: 1.2;
1519
- font-weight: 600;
1520
- letter-spacing: 0;
1497
+ font-weight: 500;
1498
+ letter-spacing: -0.5px;
1521
1499
  }
1522
1500
 
1523
- .emotion-28::before {
1501
+ .emotion-27::before {
1524
1502
  content: '';
1525
1503
  display: block;
1526
1504
  height: 0;
1527
1505
  width: 0;
1528
- margin-bottom: -0.128125em;
1506
+ margin-bottom: -0.25em;
1529
1507
  }
1530
1508
 
1531
- .emotion-28::after {
1509
+ .emotion-27::after {
1532
1510
  content: '';
1533
1511
  display: block;
1534
1512
  height: 0;
@@ -1538,126 +1516,126 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1538
1516
  }
1539
1517
 
1540
1518
  @media screen and (min-width: 768px) and (max-width: 1439px) {
1541
- .emotion-28 {
1542
- font-family: "Source Serif Pro",serif;
1543
- font-size: 24px;
1544
- line-height: 1.1666666666666667;
1545
- font-weight: 600;
1546
- letter-spacing: 0;
1519
+ .emotion-27 {
1520
+ font-family: "Bitter",serif;
1521
+ font-size: 22px;
1522
+ line-height: 1.0909090909090908;
1523
+ font-weight: 500;
1524
+ letter-spacing: -0.5px;
1547
1525
  }
1548
1526
 
1549
- .emotion-28::before {
1527
+ .emotion-27::before {
1550
1528
  content: '';
1551
1529
  display: block;
1552
1530
  height: 0;
1553
1531
  width: 0;
1554
- margin-bottom: -0.11145833333333338em;
1532
+ margin-bottom: -0.19545454545454544em;
1555
1533
  }
1556
1534
 
1557
- .emotion-28::after {
1535
+ .emotion-27::after {
1558
1536
  content: '';
1559
1537
  display: block;
1560
1538
  height: 0;
1561
1539
  width: 0;
1562
- margin-top: -0.2958333333333334em;
1540
+ margin-top: -0.25795454545454544em;
1563
1541
  }
1564
1542
  }
1565
1543
 
1566
1544
  @media screen and (min-width: 1440px) {
1567
- .emotion-28 {
1568
- font-family: "Source Serif Pro",serif;
1569
- font-size: 28px;
1570
- line-height: 1.1428571428571428;
1571
- font-weight: 600;
1572
- letter-spacing: 0;
1545
+ .emotion-27 {
1546
+ font-family: "Bitter",serif;
1547
+ font-size: 24px;
1548
+ line-height: 1.1666666666666667;
1549
+ font-weight: 500;
1550
+ letter-spacing: -0.5px;
1573
1551
  }
1574
1552
 
1575
- .emotion-28::before {
1553
+ .emotion-27::before {
1576
1554
  content: '';
1577
1555
  display: block;
1578
1556
  height: 0;
1579
1557
  width: 0;
1580
- margin-bottom: -0.09955357142857141em;
1558
+ margin-bottom: -0.2333333333333334em;
1581
1559
  }
1582
1560
 
1583
- .emotion-28::after {
1561
+ .emotion-27::after {
1584
1562
  content: '';
1585
1563
  display: block;
1586
1564
  height: 0;
1587
1565
  width: 0;
1588
- margin-top: -0.2839285714285714em;
1566
+ margin-top: -0.2958333333333334em;
1589
1567
  }
1590
1568
  }
1591
1569
 
1592
- .emotion-29 {
1570
+ .emotion-28 {
1593
1571
  margin-bottom: 12px;
1594
1572
  }
1595
1573
 
1596
- .emotion-30 {
1574
+ .emotion-29 {
1597
1575
  margin: 0;
1598
1576
  padding: 1px 0;
1599
- color: #0a0a0a;
1577
+ color: #0A0A0A;
1600
1578
  }
1601
1579
 
1602
- .emotion-30 svg {
1603
- fill: #0a0a0a;
1580
+ .emotion-29 svg {
1581
+ fill: #0A0A0A;
1604
1582
  }
1605
1583
 
1606
1584
  @media screen and (max-width: 767px) {
1607
- .emotion-30 {
1608
- font-family: "Noto Sans",sans-serif;
1585
+ .emotion-29 {
1586
+ font-family: "DM Sans",sans-serif;
1609
1587
  font-size: 14px;
1610
1588
  line-height: 1.4285714285714286;
1611
1589
  font-weight: 400;
1612
- letter-spacing: 0;
1590
+ letter-spacing: -0.5px;
1613
1591
  }
1614
1592
 
1615
- .emotion-30::before {
1593
+ .emotion-29::before {
1616
1594
  content: '';
1617
1595
  display: block;
1618
1596
  height: 0;
1619
1597
  width: 0;
1620
- margin-bottom: -0.32678571428571435em;
1598
+ margin-bottom: -0.3955357142857143em;
1621
1599
  }
1622
1600
 
1623
- .emotion-30::after {
1601
+ .emotion-29::after {
1624
1602
  content: '';
1625
1603
  display: block;
1626
1604
  height: 0;
1627
1605
  width: 0;
1628
- margin-top: -0.4267857142857143em;
1606
+ margin-top: -0.3955357142857143em;
1629
1607
  }
1630
1608
  }
1631
1609
 
1632
1610
  @media screen and (min-width: 768px) {
1633
- .emotion-30 {
1634
- font-family: "Noto Sans",sans-serif;
1611
+ .emotion-29 {
1612
+ font-family: "DM Sans",sans-serif;
1635
1613
  font-size: 16px;
1636
1614
  line-height: 1.5;
1637
1615
  font-weight: 400;
1638
- letter-spacing: 0;
1616
+ letter-spacing: -0.5px;
1639
1617
  }
1640
1618
 
1641
- .emotion-30::before {
1619
+ .emotion-29::before {
1642
1620
  content: '';
1643
1621
  display: block;
1644
1622
  height: 0;
1645
1623
  width: 0;
1646
- margin-bottom: -0.36250000000000004em;
1624
+ margin-bottom: -0.43125em;
1647
1625
  }
1648
1626
 
1649
- .emotion-30::after {
1627
+ .emotion-29::after {
1650
1628
  content: '';
1651
1629
  display: block;
1652
1630
  height: 0;
1653
1631
  width: 0;
1654
- margin-top: -0.4625em;
1632
+ margin-top: -0.43125em;
1655
1633
  }
1656
1634
  }
1657
1635
 
1658
- .emotion-73 {
1636
+ .emotion-69 {
1659
1637
  border-style: solid;
1660
- border-color: #e4e4e4;
1638
+ border-color: #DEDEDE;
1661
1639
  border-width: 1px;
1662
1640
  border-width: 0px;
1663
1641
  margin: 0;
@@ -1752,47 +1730,43 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1752
1730
  <div
1753
1731
  class="emotion-19"
1754
1732
  >
1755
- <div
1733
+ <picture
1756
1734
  class="emotion-20"
1757
1735
  >
1758
- <picture
1736
+ <div
1759
1737
  class="emotion-21"
1760
- >
1761
- <div
1762
- class="emotion-22"
1763
- />
1764
- <img
1765
- alt="image alt"
1766
- class="emotion-23"
1767
- src="some-url-to-image"
1768
- />
1769
- </picture>
1770
- </div>
1738
+ />
1739
+ <img
1740
+ alt="image alt"
1741
+ class="emotion-22"
1742
+ src="some-url-to-image"
1743
+ />
1744
+ </picture>
1771
1745
  </div>
1772
1746
  <div
1773
- class="emotion-24"
1747
+ class="emotion-23"
1774
1748
  >
1775
1749
  <div
1776
- class="emotion-25"
1750
+ class="emotion-24"
1777
1751
  >
1778
1752
  <a
1779
- class="nk-card-link emotion-26"
1753
+ class="nk-card-link emotion-25"
1780
1754
  href="catagory-one/demo-1/test-headline"
1781
1755
  >
1782
1756
  <div
1783
- class="emotion-27"
1757
+ class="emotion-26"
1784
1758
  >
1785
1759
  <h3
1786
- class="emotion-28"
1760
+ class="emotion-27"
1787
1761
  >
1788
1762
  test headline
1789
1763
  </h3>
1790
1764
  </div>
1791
1765
  <div
1792
- class="emotion-29"
1766
+ class="emotion-28"
1793
1767
  >
1794
1768
  <p
1795
- class="emotion-30"
1769
+ class="emotion-29"
1796
1770
  >
1797
1771
  teaser test text
1798
1772
  </p>
@@ -1812,47 +1786,43 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1812
1786
  <div
1813
1787
  class="emotion-19"
1814
1788
  >
1815
- <div
1789
+ <picture
1816
1790
  class="emotion-20"
1817
1791
  >
1818
- <picture
1792
+ <div
1819
1793
  class="emotion-21"
1820
- >
1821
- <div
1822
- class="emotion-22"
1823
- />
1824
- <img
1825
- alt="image alt 2"
1826
- class="emotion-23"
1827
- src="some-url-to-image"
1828
- />
1829
- </picture>
1830
- </div>
1794
+ />
1795
+ <img
1796
+ alt="image alt 2"
1797
+ class="emotion-22"
1798
+ src="some-url-to-image"
1799
+ />
1800
+ </picture>
1831
1801
  </div>
1832
1802
  <div
1833
- class="emotion-24"
1803
+ class="emotion-23"
1834
1804
  >
1835
1805
  <div
1836
- class="emotion-25"
1806
+ class="emotion-24"
1837
1807
  >
1838
1808
  <a
1839
- class="nk-card-link emotion-26"
1809
+ class="nk-card-link emotion-25"
1840
1810
  href="catagory-two/demo-2/test-headline-2"
1841
1811
  >
1842
1812
  <div
1843
- class="emotion-27"
1813
+ class="emotion-26"
1844
1814
  >
1845
1815
  <h3
1846
- class="emotion-28"
1816
+ class="emotion-27"
1847
1817
  >
1848
1818
  test headline 2
1849
1819
  </h3>
1850
1820
  </div>
1851
1821
  <div
1852
- class="emotion-29"
1822
+ class="emotion-28"
1853
1823
  >
1854
1824
  <p
1855
- class="emotion-30"
1825
+ class="emotion-29"
1856
1826
  >
1857
1827
  teaser test text 2
1858
1828
  </p>
@@ -1872,47 +1842,43 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1872
1842
  <div
1873
1843
  class="emotion-19"
1874
1844
  >
1875
- <div
1845
+ <picture
1876
1846
  class="emotion-20"
1877
1847
  >
1878
- <picture
1848
+ <div
1879
1849
  class="emotion-21"
1880
- >
1881
- <div
1882
- class="emotion-22"
1883
- />
1884
- <img
1885
- alt="image alt 3"
1886
- class="emotion-23"
1887
- src="some-url-to-image"
1888
- />
1889
- </picture>
1890
- </div>
1850
+ />
1851
+ <img
1852
+ alt="image alt 3"
1853
+ class="emotion-22"
1854
+ src="some-url-to-image"
1855
+ />
1856
+ </picture>
1891
1857
  </div>
1892
1858
  <div
1893
- class="emotion-24"
1859
+ class="emotion-23"
1894
1860
  >
1895
1861
  <div
1896
- class="emotion-25"
1862
+ class="emotion-24"
1897
1863
  >
1898
1864
  <a
1899
- class="nk-card-link emotion-26"
1865
+ class="nk-card-link emotion-25"
1900
1866
  href="catagory-three/demo-3/test-headline-3"
1901
1867
  >
1902
1868
  <div
1903
- class="emotion-27"
1869
+ class="emotion-26"
1904
1870
  >
1905
1871
  <h3
1906
- class="emotion-28"
1872
+ class="emotion-27"
1907
1873
  >
1908
1874
  test headline 3
1909
1875
  </h3>
1910
1876
  </div>
1911
1877
  <div
1912
- class="emotion-29"
1878
+ class="emotion-28"
1913
1879
  >
1914
1880
  <p
1915
- class="emotion-30"
1881
+ class="emotion-29"
1916
1882
  >
1917
1883
  teaser test text 3
1918
1884
  </p>
@@ -1932,47 +1898,43 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1932
1898
  <div
1933
1899
  class="emotion-19"
1934
1900
  >
1935
- <div
1901
+ <picture
1936
1902
  class="emotion-20"
1937
1903
  >
1938
- <picture
1904
+ <div
1939
1905
  class="emotion-21"
1940
- >
1941
- <div
1942
- class="emotion-22"
1943
- />
1944
- <img
1945
- alt="image alt 3"
1946
- class="emotion-23"
1947
- src="some-url-to-image"
1948
- />
1949
- </picture>
1950
- </div>
1906
+ />
1907
+ <img
1908
+ alt="image alt 3"
1909
+ class="emotion-22"
1910
+ src="some-url-to-image"
1911
+ />
1912
+ </picture>
1951
1913
  </div>
1952
1914
  <div
1953
- class="emotion-24"
1915
+ class="emotion-23"
1954
1916
  >
1955
1917
  <div
1956
- class="emotion-25"
1918
+ class="emotion-24"
1957
1919
  >
1958
1920
  <a
1959
- class="nk-card-link emotion-26"
1921
+ class="nk-card-link emotion-25"
1960
1922
  href="catagory-four/demo-4/test-headline-4"
1961
1923
  >
1962
1924
  <div
1963
- class="emotion-27"
1925
+ class="emotion-26"
1964
1926
  >
1965
1927
  <h3
1966
- class="emotion-28"
1928
+ class="emotion-27"
1967
1929
  >
1968
1930
  test headline 4
1969
1931
  </h3>
1970
1932
  </div>
1971
1933
  <div
1972
- class="emotion-29"
1934
+ class="emotion-28"
1973
1935
  >
1974
1936
  <p
1975
- class="emotion-30"
1937
+ class="emotion-29"
1976
1938
  >
1977
1939
  teaser test text 4
1978
1940
  </p>
@@ -1987,7 +1949,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1987
1949
  </div>
1988
1950
  <hr
1989
1951
  aria-hidden="true"
1990
- class="emotion-73"
1952
+ class="emotion-69"
1991
1953
  data-testid="divider"
1992
1954
  />
1993
1955
  </div>
@@ -2002,7 +1964,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2002
1964
 
2003
1965
  .emotion-1 {
2004
1966
  margin-bottom: 32px;
2005
- background: #0a68c1;
1967
+ background: #3358CC;
2006
1968
  }
2007
1969
 
2008
1970
  .emotion-2 {
@@ -2046,11 +2008,11 @@ exports[`SectionRow SectionRow with title 1`] = `
2046
2008
 
2047
2009
  @media screen and (max-width: 767px) {
2048
2010
  .emotion-4 {
2049
- font-family: "Source Serif Pro",serif;
2050
- font-size: 32px;
2051
- line-height: 1.125;
2052
- font-weight: 600;
2053
- letter-spacing: 0;
2011
+ font-family: "Bitter",serif;
2012
+ font-size: 28px;
2013
+ line-height: 1.1428571428571428;
2014
+ font-weight: 500;
2015
+ letter-spacing: -0.5px;
2054
2016
  }
2055
2017
 
2056
2018
  .emotion-4::before {
@@ -2058,7 +2020,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2058
2020
  display: block;
2059
2021
  height: 0;
2060
2022
  width: 0;
2061
- margin-bottom: -0.09062500000000001em;
2023
+ margin-bottom: -0.22142857142857142em;
2062
2024
  }
2063
2025
 
2064
2026
  .emotion-4::after {
@@ -2066,17 +2028,17 @@ exports[`SectionRow SectionRow with title 1`] = `
2066
2028
  display: block;
2067
2029
  height: 0;
2068
2030
  width: 0;
2069
- margin-top: -0.275em;
2031
+ margin-top: -0.2839285714285714em;
2070
2032
  }
2071
2033
  }
2072
2034
 
2073
2035
  @media screen and (min-width: 768px) and (max-width: 1439px) {
2074
2036
  .emotion-4 {
2075
- font-family: "Source Serif Pro",serif;
2076
- font-size: 36px;
2077
- line-height: 1.1111111111111112;
2078
- font-weight: 600;
2079
- letter-spacing: 0;
2037
+ font-family: "Bitter",serif;
2038
+ font-size: 32px;
2039
+ line-height: 1.125;
2040
+ font-weight: 500;
2041
+ letter-spacing: -0.5px;
2080
2042
  }
2081
2043
 
2082
2044
  .emotion-4::before {
@@ -2084,7 +2046,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2084
2046
  display: block;
2085
2047
  height: 0;
2086
2048
  width: 0;
2087
- margin-bottom: -0.08368055555555559em;
2049
+ margin-bottom: -0.21250000000000002em;
2088
2050
  }
2089
2051
 
2090
2052
  .emotion-4::after {
@@ -2092,17 +2054,17 @@ exports[`SectionRow SectionRow with title 1`] = `
2092
2054
  display: block;
2093
2055
  height: 0;
2094
2056
  width: 0;
2095
- margin-top: -0.2680555555555556em;
2057
+ margin-top: -0.275em;
2096
2058
  }
2097
2059
  }
2098
2060
 
2099
2061
  @media screen and (min-width: 1440px) {
2100
2062
  .emotion-4 {
2101
- font-family: "Source Serif Pro",serif;
2102
- font-size: 40px;
2103
- line-height: 1.1;
2104
- font-weight: 600;
2105
- letter-spacing: 0;
2063
+ font-family: "Bitter",serif;
2064
+ font-size: 36px;
2065
+ line-height: 1.1111111111111112;
2066
+ font-weight: 500;
2067
+ letter-spacing: -0.5px;
2106
2068
  }
2107
2069
 
2108
2070
  .emotion-4::before {
@@ -2110,7 +2072,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2110
2072
  display: block;
2111
2073
  height: 0;
2112
2074
  width: 0;
2113
- margin-bottom: -0.07812500000000006em;
2075
+ margin-bottom: -0.2055555555555556em;
2114
2076
  }
2115
2077
 
2116
2078
  .emotion-4::after {
@@ -2118,7 +2080,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2118
2080
  display: block;
2119
2081
  height: 0;
2120
2082
  width: 0;
2121
- margin-top: -0.26250000000000007em;
2083
+ margin-top: -0.2680555555555556em;
2122
2084
  }
2123
2085
  }
2124
2086
 
@@ -2126,11 +2088,11 @@ exports[`SectionRow SectionRow with title 1`] = `
2126
2088
  display: inline;
2127
2089
  font: inherit;
2128
2090
  margin: 0;
2129
- color: #ffffff;
2091
+ color: #FFFFFF;
2130
2092
  }
2131
2093
 
2132
2094
  .emotion-5 svg {
2133
- fill: #ffffff;
2095
+ fill: #FFFFFF;
2134
2096
  }
2135
2097
 
2136
2098
  @media screen {
@@ -2168,11 +2130,11 @@ exports[`SectionRow SectionRow with title 1`] = `
2168
2130
  transition-property: color;
2169
2131
  transition-duration: 200ms;
2170
2132
  transition-timing-function: cubic-bezier(0, 0, .5, 1);
2171
- color: #ffffff;
2133
+ color: #FFFFFF;
2172
2134
  }
2173
2135
 
2174
2136
  .emotion-7 svg {
2175
- fill: #ffffff;
2137
+ fill: #FFFFFF;
2176
2138
  }
2177
2139
 
2178
2140
  .emotion-8 {
@@ -2208,11 +2170,11 @@ exports[`SectionRow SectionRow with title 1`] = `
2208
2170
  .emotion-10 {
2209
2171
  margin: 0;
2210
2172
  padding: 1px 0;
2211
- font-family: "Noto Sans",sans-serif;
2173
+ font-family: "Poppins",sans-serif;
2212
2174
  font-size: 14px;
2213
2175
  line-height: 1.4285714285714286;
2214
2176
  font-weight: 500;
2215
- letter-spacing: 0;
2177
+ letter-spacing: -0.5px;
2216
2178
  display: inline-block;
2217
2179
  display: block;
2218
2180
  }
@@ -2222,7 +2184,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2222
2184
  display: block;
2223
2185
  height: 0;
2224
2186
  width: 0;
2225
- margin-bottom: -0.32678571428571435em;
2187
+ margin-bottom: -0.3955357142857143em;
2226
2188
  }
2227
2189
 
2228
2190
  .emotion-10::after {
@@ -2230,14 +2192,14 @@ exports[`SectionRow SectionRow with title 1`] = `
2230
2192
  display: block;
2231
2193
  height: 0;
2232
2194
  width: 0;
2233
- margin-top: -0.4267857142857143em;
2195
+ margin-top: -0.3955357142857143em;
2234
2196
  }
2235
2197
 
2236
2198
  .emotion-12 {
2237
2199
  display: inline-block;
2238
2200
  vertical-align: middle;
2239
2201
  overflow: hidden;
2240
- fill: #2e2e2e;
2202
+ fill: #2E2E2E;
2241
2203
  vertical-align: unset;
2242
2204
  display: inline-block;
2243
2205
  top: 1px;
@@ -2355,8 +2317,8 @@ exports[`SectionRow SectionRow with title 1`] = `
2355
2317
  .emotion-18 {
2356
2318
  box-sizing: border-box;
2357
2319
  overflow: hidden;
2358
- color: #2e2e2e;
2359
- background-color: #ffffff;
2320
+ color: #2E2E2E;
2321
+ background-color: #FFFFFF;
2360
2322
  position: relative;
2361
2323
  display: -webkit-box;
2362
2324
  display: -webkit-flex;
@@ -2375,24 +2337,21 @@ exports[`SectionRow SectionRow with title 1`] = `
2375
2337
  }
2376
2338
 
2377
2339
  .emotion-20 {
2378
- width: 100%;
2379
- }
2380
-
2381
- .emotion-21 {
2382
2340
  position: relative;
2383
2341
  width: 100%;
2384
2342
  display: block;
2385
2343
  padding-top: 0;
2386
2344
  height: 0;
2345
+ width: 100%;
2387
2346
  border-radius: 0;
2388
- background-color: #fafafa;
2347
+ background-color: #F4F4F4;
2389
2348
  }
2390
2349
 
2391
- .emotion-21 svg {
2392
- fill: #c0c0c0;
2350
+ .emotion-20 svg {
2351
+ fill: #C0C0C0;
2393
2352
  }
2394
2353
 
2395
- .emotion-22 {
2354
+ .emotion-21 {
2396
2355
  top: 0;
2397
2356
  left: 0;
2398
2357
  position: absolute;
@@ -2412,7 +2371,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2412
2371
  margin: 0;
2413
2372
  }
2414
2373
 
2415
- .emotion-23 {
2374
+ .emotion-22 {
2416
2375
  opacity: 0;
2417
2376
  display: block;
2418
2377
  border-radius: inherit;
@@ -2423,67 +2382,67 @@ exports[`SectionRow SectionRow with title 1`] = `
2423
2382
  position: absolute;
2424
2383
  }
2425
2384
 
2426
- .emotion-24 {
2385
+ .emotion-23 {
2427
2386
  box-sizing: border-box;
2428
2387
  }
2429
2388
 
2430
- .emotion-25 {
2389
+ .emotion-24 {
2431
2390
  box-sizing: border-box;
2432
2391
  padding: 0;
2433
2392
  }
2434
2393
 
2435
- .emotion-25 a:not(.nk-card-link) {
2394
+ .emotion-24 a:not(.nk-card-link) {
2436
2395
  z-index: 2;
2437
2396
  position: relative;
2438
2397
  }
2439
2398
 
2440
- .emotion-26 {
2399
+ .emotion-25 {
2441
2400
  -webkit-text-decoration: none;
2442
2401
  text-decoration: none;
2443
2402
  border: none;
2444
2403
  }
2445
2404
 
2446
- .emotion-26 .nk-headline-kicker {
2447
- color: #0a68c1;
2405
+ .emotion-25 .nk-headline-kicker {
2406
+ color: #3358CC;
2448
2407
  }
2449
2408
 
2450
- .emotion-26:hover:not(:disabled) .nk-headline-kicker {
2451
- color: #02509b;
2409
+ .emotion-25:hover:not(:disabled) .nk-headline-kicker {
2410
+ color: #2B4AAB;
2452
2411
  -webkit-text-decoration: underline;
2453
2412
  text-decoration: underline;
2454
2413
  }
2455
2414
 
2456
- .emotion-26:active:not(:disabled) .nk-headline-kicker {
2457
- color: #01396e;
2415
+ .emotion-25:active:not(:disabled) .nk-headline-kicker {
2416
+ color: #213A82;
2458
2417
  -webkit-text-decoration: underline;
2459
2418
  text-decoration: underline;
2460
2419
  }
2461
2420
 
2462
- .emotion-26:visited:not(:disabled) .nk-headline-kicker {
2463
- color: #7547a3;
2421
+ .emotion-25:visited:not(:disabled) .nk-headline-kicker {
2422
+ color: #5E44E4;
2464
2423
  }
2465
2424
 
2466
- .emotion-26 .nk-headline-heading {
2467
- color: #2e2e2e;
2425
+ .emotion-25 .nk-headline-heading {
2426
+ color: #2E2E2E;
2468
2427
  }
2469
2428
 
2470
- .emotion-26:hover:not(:disabled) .nk-headline-heading {
2471
- color: #02509b;
2429
+ .emotion-25:hover:not(:disabled) .nk-headline-heading {
2430
+ color: #2B4AAB;
2472
2431
  -webkit-text-decoration: underline;
2473
2432
  text-decoration: underline;
2474
2433
  }
2475
2434
 
2476
- .emotion-26:active:not(:disabled) .nk-headline-heading {
2477
- color: #01396e;
2435
+ .emotion-25:active:not(:disabled) .nk-headline-heading {
2436
+ color: #213A82;
2478
2437
  -webkit-text-decoration: underline;
2479
2438
  text-decoration: underline;
2480
2439
  }
2481
2440
 
2482
- .emotion-26:visited:not(:disabled) .nk-headline-heading {
2483
- color: #7547a3;
2441
+ .emotion-25:visited:not(:disabled) .nk-headline-heading {
2442
+ color: #5E44E4;
2484
2443
  }
2485
2444
 
2486
- .emotion-26:before {
2445
+ .emotion-25:before {
2487
2446
  content: '';
2488
2447
  top: 0;
2489
2448
  right: 0;
@@ -2494,38 +2453,38 @@ exports[`SectionRow SectionRow with title 1`] = `
2494
2453
  z-index: 1;
2495
2454
  }
2496
2455
 
2497
- .emotion-27 {
2456
+ .emotion-26 {
2498
2457
  margin-bottom: 20px;
2499
2458
  }
2500
2459
 
2501
- .emotion-28 {
2460
+ .emotion-27 {
2502
2461
  margin: 0;
2503
2462
  padding: 1px 0;
2504
- color: #0a0a0a;
2463
+ color: #0A0A0A;
2505
2464
  }
2506
2465
 
2507
- .emotion-28 svg {
2508
- fill: #0a0a0a;
2466
+ .emotion-27 svg {
2467
+ fill: #0A0A0A;
2509
2468
  }
2510
2469
 
2511
2470
  @media screen and (max-width: 767px) {
2512
- .emotion-28 {
2513
- font-family: "Source Serif Pro",serif;
2471
+ .emotion-27 {
2472
+ font-family: "Bitter",serif;
2514
2473
  font-size: 20px;
2515
2474
  line-height: 1.2;
2516
- font-weight: 600;
2517
- letter-spacing: 0;
2475
+ font-weight: 500;
2476
+ letter-spacing: -0.5px;
2518
2477
  }
2519
2478
 
2520
- .emotion-28::before {
2479
+ .emotion-27::before {
2521
2480
  content: '';
2522
2481
  display: block;
2523
2482
  height: 0;
2524
2483
  width: 0;
2525
- margin-bottom: -0.128125em;
2484
+ margin-bottom: -0.25em;
2526
2485
  }
2527
2486
 
2528
- .emotion-28::after {
2487
+ .emotion-27::after {
2529
2488
  content: '';
2530
2489
  display: block;
2531
2490
  height: 0;
@@ -2535,126 +2494,126 @@ exports[`SectionRow SectionRow with title 1`] = `
2535
2494
  }
2536
2495
 
2537
2496
  @media screen and (min-width: 768px) and (max-width: 1439px) {
2538
- .emotion-28 {
2539
- font-family: "Source Serif Pro",serif;
2540
- font-size: 24px;
2541
- line-height: 1.1666666666666667;
2542
- font-weight: 600;
2543
- letter-spacing: 0;
2497
+ .emotion-27 {
2498
+ font-family: "Bitter",serif;
2499
+ font-size: 22px;
2500
+ line-height: 1.0909090909090908;
2501
+ font-weight: 500;
2502
+ letter-spacing: -0.5px;
2544
2503
  }
2545
2504
 
2546
- .emotion-28::before {
2505
+ .emotion-27::before {
2547
2506
  content: '';
2548
2507
  display: block;
2549
2508
  height: 0;
2550
2509
  width: 0;
2551
- margin-bottom: -0.11145833333333338em;
2510
+ margin-bottom: -0.19545454545454544em;
2552
2511
  }
2553
2512
 
2554
- .emotion-28::after {
2513
+ .emotion-27::after {
2555
2514
  content: '';
2556
2515
  display: block;
2557
2516
  height: 0;
2558
2517
  width: 0;
2559
- margin-top: -0.2958333333333334em;
2518
+ margin-top: -0.25795454545454544em;
2560
2519
  }
2561
2520
  }
2562
2521
 
2563
2522
  @media screen and (min-width: 1440px) {
2564
- .emotion-28 {
2565
- font-family: "Source Serif Pro",serif;
2566
- font-size: 28px;
2567
- line-height: 1.1428571428571428;
2568
- font-weight: 600;
2569
- letter-spacing: 0;
2523
+ .emotion-27 {
2524
+ font-family: "Bitter",serif;
2525
+ font-size: 24px;
2526
+ line-height: 1.1666666666666667;
2527
+ font-weight: 500;
2528
+ letter-spacing: -0.5px;
2570
2529
  }
2571
2530
 
2572
- .emotion-28::before {
2531
+ .emotion-27::before {
2573
2532
  content: '';
2574
2533
  display: block;
2575
2534
  height: 0;
2576
2535
  width: 0;
2577
- margin-bottom: -0.09955357142857141em;
2536
+ margin-bottom: -0.2333333333333334em;
2578
2537
  }
2579
2538
 
2580
- .emotion-28::after {
2539
+ .emotion-27::after {
2581
2540
  content: '';
2582
2541
  display: block;
2583
2542
  height: 0;
2584
2543
  width: 0;
2585
- margin-top: -0.2839285714285714em;
2544
+ margin-top: -0.2958333333333334em;
2586
2545
  }
2587
2546
  }
2588
2547
 
2589
- .emotion-29 {
2548
+ .emotion-28 {
2590
2549
  margin-bottom: 12px;
2591
2550
  }
2592
2551
 
2593
- .emotion-30 {
2552
+ .emotion-29 {
2594
2553
  margin: 0;
2595
2554
  padding: 1px 0;
2596
- color: #0a0a0a;
2555
+ color: #0A0A0A;
2597
2556
  }
2598
2557
 
2599
- .emotion-30 svg {
2600
- fill: #0a0a0a;
2558
+ .emotion-29 svg {
2559
+ fill: #0A0A0A;
2601
2560
  }
2602
2561
 
2603
2562
  @media screen and (max-width: 767px) {
2604
- .emotion-30 {
2605
- font-family: "Noto Sans",sans-serif;
2563
+ .emotion-29 {
2564
+ font-family: "DM Sans",sans-serif;
2606
2565
  font-size: 14px;
2607
2566
  line-height: 1.4285714285714286;
2608
2567
  font-weight: 400;
2609
- letter-spacing: 0;
2568
+ letter-spacing: -0.5px;
2610
2569
  }
2611
2570
 
2612
- .emotion-30::before {
2571
+ .emotion-29::before {
2613
2572
  content: '';
2614
2573
  display: block;
2615
2574
  height: 0;
2616
2575
  width: 0;
2617
- margin-bottom: -0.32678571428571435em;
2576
+ margin-bottom: -0.3955357142857143em;
2618
2577
  }
2619
2578
 
2620
- .emotion-30::after {
2579
+ .emotion-29::after {
2621
2580
  content: '';
2622
2581
  display: block;
2623
2582
  height: 0;
2624
2583
  width: 0;
2625
- margin-top: -0.4267857142857143em;
2584
+ margin-top: -0.3955357142857143em;
2626
2585
  }
2627
2586
  }
2628
2587
 
2629
2588
  @media screen and (min-width: 768px) {
2630
- .emotion-30 {
2631
- font-family: "Noto Sans",sans-serif;
2589
+ .emotion-29 {
2590
+ font-family: "DM Sans",sans-serif;
2632
2591
  font-size: 16px;
2633
2592
  line-height: 1.5;
2634
2593
  font-weight: 400;
2635
- letter-spacing: 0;
2594
+ letter-spacing: -0.5px;
2636
2595
  }
2637
2596
 
2638
- .emotion-30::before {
2597
+ .emotion-29::before {
2639
2598
  content: '';
2640
2599
  display: block;
2641
2600
  height: 0;
2642
2601
  width: 0;
2643
- margin-bottom: -0.36250000000000004em;
2602
+ margin-bottom: -0.43125em;
2644
2603
  }
2645
2604
 
2646
- .emotion-30::after {
2605
+ .emotion-29::after {
2647
2606
  content: '';
2648
2607
  display: block;
2649
2608
  height: 0;
2650
2609
  width: 0;
2651
- margin-top: -0.4625em;
2610
+ margin-top: -0.43125em;
2652
2611
  }
2653
2612
  }
2654
2613
 
2655
- .emotion-73 {
2614
+ .emotion-69 {
2656
2615
  border-style: solid;
2657
- border-color: #e4e4e4;
2616
+ border-color: #DEDEDE;
2658
2617
  border-width: 1px;
2659
2618
  border-width: 0px;
2660
2619
  margin: 0;
@@ -2749,47 +2708,43 @@ exports[`SectionRow SectionRow with title 1`] = `
2749
2708
  <div
2750
2709
  class="emotion-19"
2751
2710
  >
2752
- <div
2711
+ <picture
2753
2712
  class="emotion-20"
2754
2713
  >
2755
- <picture
2714
+ <div
2756
2715
  class="emotion-21"
2757
- >
2758
- <div
2759
- class="emotion-22"
2760
- />
2761
- <img
2762
- alt="image alt"
2763
- class="emotion-23"
2764
- src="some-url-to-image"
2765
- />
2766
- </picture>
2767
- </div>
2716
+ />
2717
+ <img
2718
+ alt="image alt"
2719
+ class="emotion-22"
2720
+ src="some-url-to-image"
2721
+ />
2722
+ </picture>
2768
2723
  </div>
2769
2724
  <div
2770
- class="emotion-24"
2725
+ class="emotion-23"
2771
2726
  >
2772
2727
  <div
2773
- class="emotion-25"
2728
+ class="emotion-24"
2774
2729
  >
2775
2730
  <a
2776
- class="nk-card-link emotion-26"
2731
+ class="nk-card-link emotion-25"
2777
2732
  href="catagory-one/demo-1/test-headline"
2778
2733
  >
2779
2734
  <div
2780
- class="emotion-27"
2735
+ class="emotion-26"
2781
2736
  >
2782
2737
  <h3
2783
- class="emotion-28"
2738
+ class="emotion-27"
2784
2739
  >
2785
2740
  test headline
2786
2741
  </h3>
2787
2742
  </div>
2788
2743
  <div
2789
- class="emotion-29"
2744
+ class="emotion-28"
2790
2745
  >
2791
2746
  <p
2792
- class="emotion-30"
2747
+ class="emotion-29"
2793
2748
  >
2794
2749
  teaser test text
2795
2750
  </p>
@@ -2809,47 +2764,43 @@ exports[`SectionRow SectionRow with title 1`] = `
2809
2764
  <div
2810
2765
  class="emotion-19"
2811
2766
  >
2812
- <div
2767
+ <picture
2813
2768
  class="emotion-20"
2814
2769
  >
2815
- <picture
2770
+ <div
2816
2771
  class="emotion-21"
2817
- >
2818
- <div
2819
- class="emotion-22"
2820
- />
2821
- <img
2822
- alt="image alt 2"
2823
- class="emotion-23"
2824
- src="some-url-to-image"
2825
- />
2826
- </picture>
2827
- </div>
2772
+ />
2773
+ <img
2774
+ alt="image alt 2"
2775
+ class="emotion-22"
2776
+ src="some-url-to-image"
2777
+ />
2778
+ </picture>
2828
2779
  </div>
2829
2780
  <div
2830
- class="emotion-24"
2781
+ class="emotion-23"
2831
2782
  >
2832
2783
  <div
2833
- class="emotion-25"
2784
+ class="emotion-24"
2834
2785
  >
2835
2786
  <a
2836
- class="nk-card-link emotion-26"
2787
+ class="nk-card-link emotion-25"
2837
2788
  href="catagory-two/demo-2/test-headline-2"
2838
2789
  >
2839
2790
  <div
2840
- class="emotion-27"
2791
+ class="emotion-26"
2841
2792
  >
2842
2793
  <h3
2843
- class="emotion-28"
2794
+ class="emotion-27"
2844
2795
  >
2845
2796
  test headline 2
2846
2797
  </h3>
2847
2798
  </div>
2848
2799
  <div
2849
- class="emotion-29"
2800
+ class="emotion-28"
2850
2801
  >
2851
2802
  <p
2852
- class="emotion-30"
2803
+ class="emotion-29"
2853
2804
  >
2854
2805
  teaser test text 2
2855
2806
  </p>
@@ -2869,47 +2820,43 @@ exports[`SectionRow SectionRow with title 1`] = `
2869
2820
  <div
2870
2821
  class="emotion-19"
2871
2822
  >
2872
- <div
2823
+ <picture
2873
2824
  class="emotion-20"
2874
2825
  >
2875
- <picture
2826
+ <div
2876
2827
  class="emotion-21"
2877
- >
2878
- <div
2879
- class="emotion-22"
2880
- />
2881
- <img
2882
- alt="image alt 3"
2883
- class="emotion-23"
2884
- src="some-url-to-image"
2885
- />
2886
- </picture>
2887
- </div>
2828
+ />
2829
+ <img
2830
+ alt="image alt 3"
2831
+ class="emotion-22"
2832
+ src="some-url-to-image"
2833
+ />
2834
+ </picture>
2888
2835
  </div>
2889
2836
  <div
2890
- class="emotion-24"
2837
+ class="emotion-23"
2891
2838
  >
2892
2839
  <div
2893
- class="emotion-25"
2840
+ class="emotion-24"
2894
2841
  >
2895
2842
  <a
2896
- class="nk-card-link emotion-26"
2843
+ class="nk-card-link emotion-25"
2897
2844
  href="catagory-three/demo-3/test-headline-3"
2898
2845
  >
2899
2846
  <div
2900
- class="emotion-27"
2847
+ class="emotion-26"
2901
2848
  >
2902
2849
  <h3
2903
- class="emotion-28"
2850
+ class="emotion-27"
2904
2851
  >
2905
2852
  test headline 3
2906
2853
  </h3>
2907
2854
  </div>
2908
2855
  <div
2909
- class="emotion-29"
2856
+ class="emotion-28"
2910
2857
  >
2911
2858
  <p
2912
- class="emotion-30"
2859
+ class="emotion-29"
2913
2860
  >
2914
2861
  teaser test text 3
2915
2862
  </p>
@@ -2929,47 +2876,43 @@ exports[`SectionRow SectionRow with title 1`] = `
2929
2876
  <div
2930
2877
  class="emotion-19"
2931
2878
  >
2932
- <div
2879
+ <picture
2933
2880
  class="emotion-20"
2934
2881
  >
2935
- <picture
2882
+ <div
2936
2883
  class="emotion-21"
2937
- >
2938
- <div
2939
- class="emotion-22"
2940
- />
2941
- <img
2942
- alt="image alt 3"
2943
- class="emotion-23"
2944
- src="some-url-to-image"
2945
- />
2946
- </picture>
2947
- </div>
2884
+ />
2885
+ <img
2886
+ alt="image alt 3"
2887
+ class="emotion-22"
2888
+ src="some-url-to-image"
2889
+ />
2890
+ </picture>
2948
2891
  </div>
2949
2892
  <div
2950
- class="emotion-24"
2893
+ class="emotion-23"
2951
2894
  >
2952
2895
  <div
2953
- class="emotion-25"
2896
+ class="emotion-24"
2954
2897
  >
2955
2898
  <a
2956
- class="nk-card-link emotion-26"
2899
+ class="nk-card-link emotion-25"
2957
2900
  href="catagory-four/demo-4/test-headline-4"
2958
2901
  >
2959
2902
  <div
2960
- class="emotion-27"
2903
+ class="emotion-26"
2961
2904
  >
2962
2905
  <h3
2963
- class="emotion-28"
2906
+ class="emotion-27"
2964
2907
  >
2965
2908
  test headline 4
2966
2909
  </h3>
2967
2910
  </div>
2968
2911
  <div
2969
- class="emotion-29"
2912
+ class="emotion-28"
2970
2913
  >
2971
2914
  <p
2972
- class="emotion-30"
2915
+ class="emotion-29"
2973
2916
  >
2974
2917
  teaser test text 4
2975
2918
  </p>
@@ -2984,7 +2927,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2984
2927
  </div>
2985
2928
  <hr
2986
2929
  aria-hidden="true"
2987
- class="emotion-73"
2930
+ class="emotion-69"
2988
2931
  data-testid="divider"
2989
2932
  />
2990
2933
  </div>
@@ -3003,7 +2946,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3003
2946
 
3004
2947
  .emotion-2 {
3005
2948
  border-style: solid;
3006
- border-color: #e4e4e4;
2949
+ border-color: #DEDEDE;
3007
2950
  border-width: 1px;
3008
2951
  border-width: 0px;
3009
2952
  margin: 0;
@@ -3015,7 +2958,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3015
2958
 
3016
2959
  .emotion-3 {
3017
2960
  margin-bottom: 32px;
3018
- background: #0a68c1;
2961
+ background: #3358CC;
3019
2962
  }
3020
2963
 
3021
2964
  .emotion-4 {
@@ -3059,11 +3002,11 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3059
3002
 
3060
3003
  @media screen and (max-width: 767px) {
3061
3004
  .emotion-6 {
3062
- font-family: "Source Serif Pro",serif;
3063
- font-size: 32px;
3064
- line-height: 1.125;
3065
- font-weight: 600;
3066
- letter-spacing: 0;
3005
+ font-family: "Bitter",serif;
3006
+ font-size: 28px;
3007
+ line-height: 1.1428571428571428;
3008
+ font-weight: 500;
3009
+ letter-spacing: -0.5px;
3067
3010
  }
3068
3011
 
3069
3012
  .emotion-6::before {
@@ -3071,7 +3014,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3071
3014
  display: block;
3072
3015
  height: 0;
3073
3016
  width: 0;
3074
- margin-bottom: -0.09062500000000001em;
3017
+ margin-bottom: -0.22142857142857142em;
3075
3018
  }
3076
3019
 
3077
3020
  .emotion-6::after {
@@ -3079,17 +3022,17 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3079
3022
  display: block;
3080
3023
  height: 0;
3081
3024
  width: 0;
3082
- margin-top: -0.275em;
3025
+ margin-top: -0.2839285714285714em;
3083
3026
  }
3084
3027
  }
3085
3028
 
3086
3029
  @media screen and (min-width: 768px) and (max-width: 1439px) {
3087
3030
  .emotion-6 {
3088
- font-family: "Source Serif Pro",serif;
3089
- font-size: 36px;
3090
- line-height: 1.1111111111111112;
3091
- font-weight: 600;
3092
- letter-spacing: 0;
3031
+ font-family: "Bitter",serif;
3032
+ font-size: 32px;
3033
+ line-height: 1.125;
3034
+ font-weight: 500;
3035
+ letter-spacing: -0.5px;
3093
3036
  }
3094
3037
 
3095
3038
  .emotion-6::before {
@@ -3097,7 +3040,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3097
3040
  display: block;
3098
3041
  height: 0;
3099
3042
  width: 0;
3100
- margin-bottom: -0.08368055555555559em;
3043
+ margin-bottom: -0.21250000000000002em;
3101
3044
  }
3102
3045
 
3103
3046
  .emotion-6::after {
@@ -3105,17 +3048,17 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3105
3048
  display: block;
3106
3049
  height: 0;
3107
3050
  width: 0;
3108
- margin-top: -0.2680555555555556em;
3051
+ margin-top: -0.275em;
3109
3052
  }
3110
3053
  }
3111
3054
 
3112
3055
  @media screen and (min-width: 1440px) {
3113
3056
  .emotion-6 {
3114
- font-family: "Source Serif Pro",serif;
3115
- font-size: 40px;
3116
- line-height: 1.1;
3117
- font-weight: 600;
3118
- letter-spacing: 0;
3057
+ font-family: "Bitter",serif;
3058
+ font-size: 36px;
3059
+ line-height: 1.1111111111111112;
3060
+ font-weight: 500;
3061
+ letter-spacing: -0.5px;
3119
3062
  }
3120
3063
 
3121
3064
  .emotion-6::before {
@@ -3123,7 +3066,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3123
3066
  display: block;
3124
3067
  height: 0;
3125
3068
  width: 0;
3126
- margin-bottom: -0.07812500000000006em;
3069
+ margin-bottom: -0.2055555555555556em;
3127
3070
  }
3128
3071
 
3129
3072
  .emotion-6::after {
@@ -3131,7 +3074,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3131
3074
  display: block;
3132
3075
  height: 0;
3133
3076
  width: 0;
3134
- margin-top: -0.26250000000000007em;
3077
+ margin-top: -0.2680555555555556em;
3135
3078
  }
3136
3079
  }
3137
3080
 
@@ -3139,11 +3082,11 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3139
3082
  display: inline;
3140
3083
  font: inherit;
3141
3084
  margin: 0;
3142
- color: #ffffff;
3085
+ color: #FFFFFF;
3143
3086
  }
3144
3087
 
3145
3088
  .emotion-7 svg {
3146
- fill: #ffffff;
3089
+ fill: #FFFFFF;
3147
3090
  }
3148
3091
 
3149
3092
  @media screen {
@@ -3181,11 +3124,11 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3181
3124
  transition-property: color;
3182
3125
  transition-duration: 200ms;
3183
3126
  transition-timing-function: cubic-bezier(0, 0, .5, 1);
3184
- color: #ffffff;
3127
+ color: #FFFFFF;
3185
3128
  }
3186
3129
 
3187
3130
  .emotion-9 svg {
3188
- fill: #ffffff;
3131
+ fill: #FFFFFF;
3189
3132
  }
3190
3133
 
3191
3134
  .emotion-10 {
@@ -3221,11 +3164,11 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3221
3164
  .emotion-12 {
3222
3165
  margin: 0;
3223
3166
  padding: 1px 0;
3224
- font-family: "Noto Sans",sans-serif;
3167
+ font-family: "Poppins",sans-serif;
3225
3168
  font-size: 14px;
3226
3169
  line-height: 1.4285714285714286;
3227
3170
  font-weight: 500;
3228
- letter-spacing: 0;
3171
+ letter-spacing: -0.5px;
3229
3172
  display: inline-block;
3230
3173
  display: block;
3231
3174
  }
@@ -3235,7 +3178,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3235
3178
  display: block;
3236
3179
  height: 0;
3237
3180
  width: 0;
3238
- margin-bottom: -0.32678571428571435em;
3181
+ margin-bottom: -0.3955357142857143em;
3239
3182
  }
3240
3183
 
3241
3184
  .emotion-12::after {
@@ -3243,14 +3186,14 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3243
3186
  display: block;
3244
3187
  height: 0;
3245
3188
  width: 0;
3246
- margin-top: -0.4267857142857143em;
3189
+ margin-top: -0.3955357142857143em;
3247
3190
  }
3248
3191
 
3249
3192
  .emotion-14 {
3250
3193
  display: inline-block;
3251
3194
  vertical-align: middle;
3252
3195
  overflow: hidden;
3253
- fill: #2e2e2e;
3196
+ fill: #2E2E2E;
3254
3197
  vertical-align: unset;
3255
3198
  display: inline-block;
3256
3199
  top: 1px;
@@ -3368,8 +3311,8 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3368
3311
  .emotion-20 {
3369
3312
  box-sizing: border-box;
3370
3313
  overflow: hidden;
3371
- color: #2e2e2e;
3372
- background-color: #ffffff;
3314
+ color: #2E2E2E;
3315
+ background-color: #FFFFFF;
3373
3316
  position: relative;
3374
3317
  display: -webkit-box;
3375
3318
  display: -webkit-flex;
@@ -3388,24 +3331,21 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3388
3331
  }
3389
3332
 
3390
3333
  .emotion-22 {
3391
- width: 100%;
3392
- }
3393
-
3394
- .emotion-23 {
3395
3334
  position: relative;
3396
3335
  width: 100%;
3397
3336
  display: block;
3398
3337
  padding-top: 0;
3399
3338
  height: 0;
3339
+ width: 100%;
3400
3340
  border-radius: 0;
3401
- background-color: #fafafa;
3341
+ background-color: #F4F4F4;
3402
3342
  }
3403
3343
 
3404
- .emotion-23 svg {
3405
- fill: #c0c0c0;
3344
+ .emotion-22 svg {
3345
+ fill: #C0C0C0;
3406
3346
  }
3407
3347
 
3408
- .emotion-24 {
3348
+ .emotion-23 {
3409
3349
  top: 0;
3410
3350
  left: 0;
3411
3351
  position: absolute;
@@ -3425,7 +3365,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3425
3365
  margin: 0;
3426
3366
  }
3427
3367
 
3428
- .emotion-25 {
3368
+ .emotion-24 {
3429
3369
  opacity: 0;
3430
3370
  display: block;
3431
3371
  border-radius: inherit;
@@ -3436,67 +3376,67 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3436
3376
  position: absolute;
3437
3377
  }
3438
3378
 
3439
- .emotion-26 {
3379
+ .emotion-25 {
3440
3380
  box-sizing: border-box;
3441
3381
  }
3442
3382
 
3443
- .emotion-27 {
3383
+ .emotion-26 {
3444
3384
  box-sizing: border-box;
3445
3385
  padding: 0;
3446
3386
  }
3447
3387
 
3448
- .emotion-27 a:not(.nk-card-link) {
3388
+ .emotion-26 a:not(.nk-card-link) {
3449
3389
  z-index: 2;
3450
3390
  position: relative;
3451
3391
  }
3452
3392
 
3453
- .emotion-28 {
3393
+ .emotion-27 {
3454
3394
  -webkit-text-decoration: none;
3455
3395
  text-decoration: none;
3456
3396
  border: none;
3457
3397
  }
3458
3398
 
3459
- .emotion-28 .nk-headline-kicker {
3460
- color: #0a68c1;
3399
+ .emotion-27 .nk-headline-kicker {
3400
+ color: #3358CC;
3461
3401
  }
3462
3402
 
3463
- .emotion-28:hover:not(:disabled) .nk-headline-kicker {
3464
- color: #02509b;
3403
+ .emotion-27:hover:not(:disabled) .nk-headline-kicker {
3404
+ color: #2B4AAB;
3465
3405
  -webkit-text-decoration: underline;
3466
3406
  text-decoration: underline;
3467
3407
  }
3468
3408
 
3469
- .emotion-28:active:not(:disabled) .nk-headline-kicker {
3470
- color: #01396e;
3409
+ .emotion-27:active:not(:disabled) .nk-headline-kicker {
3410
+ color: #213A82;
3471
3411
  -webkit-text-decoration: underline;
3472
3412
  text-decoration: underline;
3473
3413
  }
3474
3414
 
3475
- .emotion-28:visited:not(:disabled) .nk-headline-kicker {
3476
- color: #7547a3;
3415
+ .emotion-27:visited:not(:disabled) .nk-headline-kicker {
3416
+ color: #5E44E4;
3477
3417
  }
3478
3418
 
3479
- .emotion-28 .nk-headline-heading {
3480
- color: #2e2e2e;
3419
+ .emotion-27 .nk-headline-heading {
3420
+ color: #2E2E2E;
3481
3421
  }
3482
3422
 
3483
- .emotion-28:hover:not(:disabled) .nk-headline-heading {
3484
- color: #02509b;
3423
+ .emotion-27:hover:not(:disabled) .nk-headline-heading {
3424
+ color: #2B4AAB;
3485
3425
  -webkit-text-decoration: underline;
3486
3426
  text-decoration: underline;
3487
3427
  }
3488
3428
 
3489
- .emotion-28:active:not(:disabled) .nk-headline-heading {
3490
- color: #01396e;
3429
+ .emotion-27:active:not(:disabled) .nk-headline-heading {
3430
+ color: #213A82;
3491
3431
  -webkit-text-decoration: underline;
3492
3432
  text-decoration: underline;
3493
3433
  }
3494
3434
 
3495
- .emotion-28:visited:not(:disabled) .nk-headline-heading {
3496
- color: #7547a3;
3435
+ .emotion-27:visited:not(:disabled) .nk-headline-heading {
3436
+ color: #5E44E4;
3497
3437
  }
3498
3438
 
3499
- .emotion-28:before {
3439
+ .emotion-27:before {
3500
3440
  content: '';
3501
3441
  top: 0;
3502
3442
  right: 0;
@@ -3507,38 +3447,38 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3507
3447
  z-index: 1;
3508
3448
  }
3509
3449
 
3510
- .emotion-29 {
3450
+ .emotion-28 {
3511
3451
  margin-bottom: 20px;
3512
3452
  }
3513
3453
 
3514
- .emotion-30 {
3454
+ .emotion-29 {
3515
3455
  margin: 0;
3516
3456
  padding: 1px 0;
3517
- color: #0a0a0a;
3457
+ color: #0A0A0A;
3518
3458
  }
3519
3459
 
3520
- .emotion-30 svg {
3521
- fill: #0a0a0a;
3460
+ .emotion-29 svg {
3461
+ fill: #0A0A0A;
3522
3462
  }
3523
3463
 
3524
3464
  @media screen and (max-width: 767px) {
3525
- .emotion-30 {
3526
- font-family: "Source Serif Pro",serif;
3465
+ .emotion-29 {
3466
+ font-family: "Bitter",serif;
3527
3467
  font-size: 20px;
3528
3468
  line-height: 1.2;
3529
- font-weight: 600;
3530
- letter-spacing: 0;
3469
+ font-weight: 500;
3470
+ letter-spacing: -0.5px;
3531
3471
  }
3532
3472
 
3533
- .emotion-30::before {
3473
+ .emotion-29::before {
3534
3474
  content: '';
3535
3475
  display: block;
3536
3476
  height: 0;
3537
3477
  width: 0;
3538
- margin-bottom: -0.128125em;
3478
+ margin-bottom: -0.25em;
3539
3479
  }
3540
3480
 
3541
- .emotion-30::after {
3481
+ .emotion-29::after {
3542
3482
  content: '';
3543
3483
  display: block;
3544
3484
  height: 0;
@@ -3548,120 +3488,120 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3548
3488
  }
3549
3489
 
3550
3490
  @media screen and (min-width: 768px) and (max-width: 1439px) {
3551
- .emotion-30 {
3552
- font-family: "Source Serif Pro",serif;
3553
- font-size: 24px;
3554
- line-height: 1.1666666666666667;
3555
- font-weight: 600;
3556
- letter-spacing: 0;
3491
+ .emotion-29 {
3492
+ font-family: "Bitter",serif;
3493
+ font-size: 22px;
3494
+ line-height: 1.0909090909090908;
3495
+ font-weight: 500;
3496
+ letter-spacing: -0.5px;
3557
3497
  }
3558
3498
 
3559
- .emotion-30::before {
3499
+ .emotion-29::before {
3560
3500
  content: '';
3561
3501
  display: block;
3562
3502
  height: 0;
3563
3503
  width: 0;
3564
- margin-bottom: -0.11145833333333338em;
3504
+ margin-bottom: -0.19545454545454544em;
3565
3505
  }
3566
3506
 
3567
- .emotion-30::after {
3507
+ .emotion-29::after {
3568
3508
  content: '';
3569
3509
  display: block;
3570
3510
  height: 0;
3571
3511
  width: 0;
3572
- margin-top: -0.2958333333333334em;
3512
+ margin-top: -0.25795454545454544em;
3573
3513
  }
3574
3514
  }
3575
3515
 
3576
3516
  @media screen and (min-width: 1440px) {
3577
- .emotion-30 {
3578
- font-family: "Source Serif Pro",serif;
3579
- font-size: 28px;
3580
- line-height: 1.1428571428571428;
3581
- font-weight: 600;
3582
- letter-spacing: 0;
3517
+ .emotion-29 {
3518
+ font-family: "Bitter",serif;
3519
+ font-size: 24px;
3520
+ line-height: 1.1666666666666667;
3521
+ font-weight: 500;
3522
+ letter-spacing: -0.5px;
3583
3523
  }
3584
3524
 
3585
- .emotion-30::before {
3525
+ .emotion-29::before {
3586
3526
  content: '';
3587
3527
  display: block;
3588
3528
  height: 0;
3589
3529
  width: 0;
3590
- margin-bottom: -0.09955357142857141em;
3530
+ margin-bottom: -0.2333333333333334em;
3591
3531
  }
3592
3532
 
3593
- .emotion-30::after {
3533
+ .emotion-29::after {
3594
3534
  content: '';
3595
3535
  display: block;
3596
3536
  height: 0;
3597
3537
  width: 0;
3598
- margin-top: -0.2839285714285714em;
3538
+ margin-top: -0.2958333333333334em;
3599
3539
  }
3600
3540
  }
3601
3541
 
3602
- .emotion-31 {
3542
+ .emotion-30 {
3603
3543
  margin-bottom: 12px;
3604
3544
  }
3605
3545
 
3606
- .emotion-32 {
3546
+ .emotion-31 {
3607
3547
  margin: 0;
3608
3548
  padding: 1px 0;
3609
- color: #0a0a0a;
3549
+ color: #0A0A0A;
3610
3550
  }
3611
3551
 
3612
- .emotion-32 svg {
3613
- fill: #0a0a0a;
3552
+ .emotion-31 svg {
3553
+ fill: #0A0A0A;
3614
3554
  }
3615
3555
 
3616
3556
  @media screen and (max-width: 767px) {
3617
- .emotion-32 {
3618
- font-family: "Noto Sans",sans-serif;
3557
+ .emotion-31 {
3558
+ font-family: "DM Sans",sans-serif;
3619
3559
  font-size: 14px;
3620
3560
  line-height: 1.4285714285714286;
3621
3561
  font-weight: 400;
3622
- letter-spacing: 0;
3562
+ letter-spacing: -0.5px;
3623
3563
  }
3624
3564
 
3625
- .emotion-32::before {
3565
+ .emotion-31::before {
3626
3566
  content: '';
3627
3567
  display: block;
3628
3568
  height: 0;
3629
3569
  width: 0;
3630
- margin-bottom: -0.32678571428571435em;
3570
+ margin-bottom: -0.3955357142857143em;
3631
3571
  }
3632
3572
 
3633
- .emotion-32::after {
3573
+ .emotion-31::after {
3634
3574
  content: '';
3635
3575
  display: block;
3636
3576
  height: 0;
3637
3577
  width: 0;
3638
- margin-top: -0.4267857142857143em;
3578
+ margin-top: -0.3955357142857143em;
3639
3579
  }
3640
3580
  }
3641
3581
 
3642
3582
  @media screen and (min-width: 768px) {
3643
- .emotion-32 {
3644
- font-family: "Noto Sans",sans-serif;
3583
+ .emotion-31 {
3584
+ font-family: "DM Sans",sans-serif;
3645
3585
  font-size: 16px;
3646
3586
  line-height: 1.5;
3647
3587
  font-weight: 400;
3648
- letter-spacing: 0;
3588
+ letter-spacing: -0.5px;
3649
3589
  }
3650
3590
 
3651
- .emotion-32::before {
3591
+ .emotion-31::before {
3652
3592
  content: '';
3653
3593
  display: block;
3654
3594
  height: 0;
3655
3595
  width: 0;
3656
- margin-bottom: -0.36250000000000004em;
3596
+ margin-bottom: -0.43125em;
3657
3597
  }
3658
3598
 
3659
- .emotion-32::after {
3599
+ .emotion-31::after {
3660
3600
  content: '';
3661
3601
  display: block;
3662
3602
  height: 0;
3663
3603
  width: 0;
3664
- margin-top: -0.4625em;
3604
+ margin-top: -0.43125em;
3665
3605
  }
3666
3606
  }
3667
3607
 
@@ -3760,47 +3700,43 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3760
3700
  <div
3761
3701
  class="emotion-21"
3762
3702
  >
3763
- <div
3703
+ <picture
3764
3704
  class="emotion-22"
3765
3705
  >
3766
- <picture
3706
+ <div
3767
3707
  class="emotion-23"
3768
- >
3769
- <div
3770
- class="emotion-24"
3771
- />
3772
- <img
3773
- alt="image alt"
3774
- class="emotion-25"
3775
- src="some-url-to-image"
3776
- />
3777
- </picture>
3778
- </div>
3708
+ />
3709
+ <img
3710
+ alt="image alt"
3711
+ class="emotion-24"
3712
+ src="some-url-to-image"
3713
+ />
3714
+ </picture>
3779
3715
  </div>
3780
3716
  <div
3781
- class="emotion-26"
3717
+ class="emotion-25"
3782
3718
  >
3783
3719
  <div
3784
- class="emotion-27"
3720
+ class="emotion-26"
3785
3721
  >
3786
3722
  <a
3787
- class="nk-card-link emotion-28"
3723
+ class="nk-card-link emotion-27"
3788
3724
  href="catagory-one/demo-1/test-headline"
3789
3725
  >
3790
3726
  <div
3791
- class="emotion-29"
3727
+ class="emotion-28"
3792
3728
  >
3793
3729
  <h3
3794
- class="emotion-30"
3730
+ class="emotion-29"
3795
3731
  >
3796
3732
  test headline
3797
3733
  </h3>
3798
3734
  </div>
3799
3735
  <div
3800
- class="emotion-31"
3736
+ class="emotion-30"
3801
3737
  >
3802
3738
  <p
3803
- class="emotion-32"
3739
+ class="emotion-31"
3804
3740
  >
3805
3741
  teaser test text
3806
3742
  </p>
@@ -3820,47 +3756,43 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3820
3756
  <div
3821
3757
  class="emotion-21"
3822
3758
  >
3823
- <div
3759
+ <picture
3824
3760
  class="emotion-22"
3825
3761
  >
3826
- <picture
3762
+ <div
3827
3763
  class="emotion-23"
3828
- >
3829
- <div
3830
- class="emotion-24"
3831
- />
3832
- <img
3833
- alt="image alt 2"
3834
- class="emotion-25"
3835
- src="some-url-to-image"
3836
- />
3837
- </picture>
3838
- </div>
3764
+ />
3765
+ <img
3766
+ alt="image alt 2"
3767
+ class="emotion-24"
3768
+ src="some-url-to-image"
3769
+ />
3770
+ </picture>
3839
3771
  </div>
3840
3772
  <div
3841
- class="emotion-26"
3773
+ class="emotion-25"
3842
3774
  >
3843
3775
  <div
3844
- class="emotion-27"
3776
+ class="emotion-26"
3845
3777
  >
3846
3778
  <a
3847
- class="nk-card-link emotion-28"
3779
+ class="nk-card-link emotion-27"
3848
3780
  href="catagory-two/demo-2/test-headline-2"
3849
3781
  >
3850
3782
  <div
3851
- class="emotion-29"
3783
+ class="emotion-28"
3852
3784
  >
3853
3785
  <h3
3854
- class="emotion-30"
3786
+ class="emotion-29"
3855
3787
  >
3856
3788
  test headline 2
3857
3789
  </h3>
3858
3790
  </div>
3859
3791
  <div
3860
- class="emotion-31"
3792
+ class="emotion-30"
3861
3793
  >
3862
3794
  <p
3863
- class="emotion-32"
3795
+ class="emotion-31"
3864
3796
  >
3865
3797
  teaser test text 2
3866
3798
  </p>
@@ -3880,47 +3812,43 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3880
3812
  <div
3881
3813
  class="emotion-21"
3882
3814
  >
3883
- <div
3815
+ <picture
3884
3816
  class="emotion-22"
3885
3817
  >
3886
- <picture
3818
+ <div
3887
3819
  class="emotion-23"
3888
- >
3889
- <div
3890
- class="emotion-24"
3891
- />
3892
- <img
3893
- alt="image alt 3"
3894
- class="emotion-25"
3895
- src="some-url-to-image"
3896
- />
3897
- </picture>
3898
- </div>
3820
+ />
3821
+ <img
3822
+ alt="image alt 3"
3823
+ class="emotion-24"
3824
+ src="some-url-to-image"
3825
+ />
3826
+ </picture>
3899
3827
  </div>
3900
3828
  <div
3901
- class="emotion-26"
3829
+ class="emotion-25"
3902
3830
  >
3903
3831
  <div
3904
- class="emotion-27"
3832
+ class="emotion-26"
3905
3833
  >
3906
3834
  <a
3907
- class="nk-card-link emotion-28"
3835
+ class="nk-card-link emotion-27"
3908
3836
  href="catagory-three/demo-3/test-headline-3"
3909
3837
  >
3910
3838
  <div
3911
- class="emotion-29"
3839
+ class="emotion-28"
3912
3840
  >
3913
3841
  <h3
3914
- class="emotion-30"
3842
+ class="emotion-29"
3915
3843
  >
3916
3844
  test headline 3
3917
3845
  </h3>
3918
3846
  </div>
3919
3847
  <div
3920
- class="emotion-31"
3848
+ class="emotion-30"
3921
3849
  >
3922
3850
  <p
3923
- class="emotion-32"
3851
+ class="emotion-31"
3924
3852
  >
3925
3853
  teaser test text 3
3926
3854
  </p>
@@ -3940,47 +3868,43 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3940
3868
  <div
3941
3869
  class="emotion-21"
3942
3870
  >
3943
- <div
3871
+ <picture
3944
3872
  class="emotion-22"
3945
3873
  >
3946
- <picture
3874
+ <div
3947
3875
  class="emotion-23"
3948
- >
3949
- <div
3950
- class="emotion-24"
3951
- />
3952
- <img
3953
- alt="image alt 3"
3954
- class="emotion-25"
3955
- src="some-url-to-image"
3956
- />
3957
- </picture>
3958
- </div>
3876
+ />
3877
+ <img
3878
+ alt="image alt 3"
3879
+ class="emotion-24"
3880
+ src="some-url-to-image"
3881
+ />
3882
+ </picture>
3959
3883
  </div>
3960
3884
  <div
3961
- class="emotion-26"
3885
+ class="emotion-25"
3962
3886
  >
3963
3887
  <div
3964
- class="emotion-27"
3888
+ class="emotion-26"
3965
3889
  >
3966
3890
  <a
3967
- class="nk-card-link emotion-28"
3891
+ class="nk-card-link emotion-27"
3968
3892
  href="catagory-four/demo-4/test-headline-4"
3969
3893
  >
3970
3894
  <div
3971
- class="emotion-29"
3895
+ class="emotion-28"
3972
3896
  >
3973
3897
  <h3
3974
- class="emotion-30"
3898
+ class="emotion-29"
3975
3899
  >
3976
3900
  test headline 4
3977
3901
  </h3>
3978
3902
  </div>
3979
3903
  <div
3980
- class="emotion-31"
3904
+ class="emotion-30"
3981
3905
  >
3982
3906
  <p
3983
- class="emotion-32"
3907
+ class="emotion-31"
3984
3908
  >
3985
3909
  teaser test text 4
3986
3910
  </p>
@@ -4114,8 +4038,8 @@ exports[`SectionRow SectionRow without title 1`] = `
4114
4038
  .emotion-5 {
4115
4039
  box-sizing: border-box;
4116
4040
  overflow: hidden;
4117
- color: #2e2e2e;
4118
- background-color: #ffffff;
4041
+ color: #2E2E2E;
4042
+ background-color: #FFFFFF;
4119
4043
  position: relative;
4120
4044
  display: -webkit-box;
4121
4045
  display: -webkit-flex;
@@ -4134,24 +4058,21 @@ exports[`SectionRow SectionRow without title 1`] = `
4134
4058
  }
4135
4059
 
4136
4060
  .emotion-7 {
4137
- width: 100%;
4138
- }
4139
-
4140
- .emotion-8 {
4141
4061
  position: relative;
4142
4062
  width: 100%;
4143
4063
  display: block;
4144
4064
  padding-top: 0;
4145
4065
  height: 0;
4066
+ width: 100%;
4146
4067
  border-radius: 0;
4147
- background-color: #fafafa;
4068
+ background-color: #F4F4F4;
4148
4069
  }
4149
4070
 
4150
- .emotion-8 svg {
4151
- fill: #c0c0c0;
4071
+ .emotion-7 svg {
4072
+ fill: #C0C0C0;
4152
4073
  }
4153
4074
 
4154
- .emotion-9 {
4075
+ .emotion-8 {
4155
4076
  top: 0;
4156
4077
  left: 0;
4157
4078
  position: absolute;
@@ -4171,7 +4092,7 @@ exports[`SectionRow SectionRow without title 1`] = `
4171
4092
  margin: 0;
4172
4093
  }
4173
4094
 
4174
- .emotion-10 {
4095
+ .emotion-9 {
4175
4096
  opacity: 0;
4176
4097
  display: block;
4177
4098
  border-radius: inherit;
@@ -4182,67 +4103,67 @@ exports[`SectionRow SectionRow without title 1`] = `
4182
4103
  position: absolute;
4183
4104
  }
4184
4105
 
4185
- .emotion-11 {
4106
+ .emotion-10 {
4186
4107
  box-sizing: border-box;
4187
4108
  }
4188
4109
 
4189
- .emotion-12 {
4110
+ .emotion-11 {
4190
4111
  box-sizing: border-box;
4191
4112
  padding: 0;
4192
4113
  }
4193
4114
 
4194
- .emotion-12 a:not(.nk-card-link) {
4115
+ .emotion-11 a:not(.nk-card-link) {
4195
4116
  z-index: 2;
4196
4117
  position: relative;
4197
4118
  }
4198
4119
 
4199
- .emotion-13 {
4120
+ .emotion-12 {
4200
4121
  -webkit-text-decoration: none;
4201
4122
  text-decoration: none;
4202
4123
  border: none;
4203
4124
  }
4204
4125
 
4205
- .emotion-13 .nk-headline-kicker {
4206
- color: #0a68c1;
4126
+ .emotion-12 .nk-headline-kicker {
4127
+ color: #3358CC;
4207
4128
  }
4208
4129
 
4209
- .emotion-13:hover:not(:disabled) .nk-headline-kicker {
4210
- color: #02509b;
4130
+ .emotion-12:hover:not(:disabled) .nk-headline-kicker {
4131
+ color: #2B4AAB;
4211
4132
  -webkit-text-decoration: underline;
4212
4133
  text-decoration: underline;
4213
4134
  }
4214
4135
 
4215
- .emotion-13:active:not(:disabled) .nk-headline-kicker {
4216
- color: #01396e;
4136
+ .emotion-12:active:not(:disabled) .nk-headline-kicker {
4137
+ color: #213A82;
4217
4138
  -webkit-text-decoration: underline;
4218
4139
  text-decoration: underline;
4219
4140
  }
4220
4141
 
4221
- .emotion-13:visited:not(:disabled) .nk-headline-kicker {
4222
- color: #7547a3;
4142
+ .emotion-12:visited:not(:disabled) .nk-headline-kicker {
4143
+ color: #5E44E4;
4223
4144
  }
4224
4145
 
4225
- .emotion-13 .nk-headline-heading {
4226
- color: #2e2e2e;
4146
+ .emotion-12 .nk-headline-heading {
4147
+ color: #2E2E2E;
4227
4148
  }
4228
4149
 
4229
- .emotion-13:hover:not(:disabled) .nk-headline-heading {
4230
- color: #02509b;
4150
+ .emotion-12:hover:not(:disabled) .nk-headline-heading {
4151
+ color: #2B4AAB;
4231
4152
  -webkit-text-decoration: underline;
4232
4153
  text-decoration: underline;
4233
4154
  }
4234
4155
 
4235
- .emotion-13:active:not(:disabled) .nk-headline-heading {
4236
- color: #01396e;
4156
+ .emotion-12:active:not(:disabled) .nk-headline-heading {
4157
+ color: #213A82;
4237
4158
  -webkit-text-decoration: underline;
4238
4159
  text-decoration: underline;
4239
4160
  }
4240
4161
 
4241
- .emotion-13:visited:not(:disabled) .nk-headline-heading {
4242
- color: #7547a3;
4162
+ .emotion-12:visited:not(:disabled) .nk-headline-heading {
4163
+ color: #5E44E4;
4243
4164
  }
4244
4165
 
4245
- .emotion-13:before {
4166
+ .emotion-12:before {
4246
4167
  content: '';
4247
4168
  top: 0;
4248
4169
  right: 0;
@@ -4253,38 +4174,38 @@ exports[`SectionRow SectionRow without title 1`] = `
4253
4174
  z-index: 1;
4254
4175
  }
4255
4176
 
4256
- .emotion-14 {
4177
+ .emotion-13 {
4257
4178
  margin-bottom: 20px;
4258
4179
  }
4259
4180
 
4260
- .emotion-15 {
4181
+ .emotion-14 {
4261
4182
  margin: 0;
4262
4183
  padding: 1px 0;
4263
- color: #0a0a0a;
4184
+ color: #0A0A0A;
4264
4185
  }
4265
4186
 
4266
- .emotion-15 svg {
4267
- fill: #0a0a0a;
4187
+ .emotion-14 svg {
4188
+ fill: #0A0A0A;
4268
4189
  }
4269
4190
 
4270
4191
  @media screen and (max-width: 767px) {
4271
- .emotion-15 {
4272
- font-family: "Source Serif Pro",serif;
4192
+ .emotion-14 {
4193
+ font-family: "Bitter",serif;
4273
4194
  font-size: 20px;
4274
4195
  line-height: 1.2;
4275
- font-weight: 600;
4276
- letter-spacing: 0;
4196
+ font-weight: 500;
4197
+ letter-spacing: -0.5px;
4277
4198
  }
4278
4199
 
4279
- .emotion-15::before {
4200
+ .emotion-14::before {
4280
4201
  content: '';
4281
4202
  display: block;
4282
4203
  height: 0;
4283
4204
  width: 0;
4284
- margin-bottom: -0.128125em;
4205
+ margin-bottom: -0.25em;
4285
4206
  }
4286
4207
 
4287
- .emotion-15::after {
4208
+ .emotion-14::after {
4288
4209
  content: '';
4289
4210
  display: block;
4290
4211
  height: 0;
@@ -4294,126 +4215,126 @@ exports[`SectionRow SectionRow without title 1`] = `
4294
4215
  }
4295
4216
 
4296
4217
  @media screen and (min-width: 768px) and (max-width: 1439px) {
4297
- .emotion-15 {
4298
- font-family: "Source Serif Pro",serif;
4299
- font-size: 24px;
4300
- line-height: 1.1666666666666667;
4301
- font-weight: 600;
4302
- letter-spacing: 0;
4218
+ .emotion-14 {
4219
+ font-family: "Bitter",serif;
4220
+ font-size: 22px;
4221
+ line-height: 1.0909090909090908;
4222
+ font-weight: 500;
4223
+ letter-spacing: -0.5px;
4303
4224
  }
4304
4225
 
4305
- .emotion-15::before {
4226
+ .emotion-14::before {
4306
4227
  content: '';
4307
4228
  display: block;
4308
4229
  height: 0;
4309
4230
  width: 0;
4310
- margin-bottom: -0.11145833333333338em;
4231
+ margin-bottom: -0.19545454545454544em;
4311
4232
  }
4312
4233
 
4313
- .emotion-15::after {
4234
+ .emotion-14::after {
4314
4235
  content: '';
4315
4236
  display: block;
4316
4237
  height: 0;
4317
4238
  width: 0;
4318
- margin-top: -0.2958333333333334em;
4239
+ margin-top: -0.25795454545454544em;
4319
4240
  }
4320
4241
  }
4321
4242
 
4322
4243
  @media screen and (min-width: 1440px) {
4323
- .emotion-15 {
4324
- font-family: "Source Serif Pro",serif;
4325
- font-size: 28px;
4326
- line-height: 1.1428571428571428;
4327
- font-weight: 600;
4328
- letter-spacing: 0;
4244
+ .emotion-14 {
4245
+ font-family: "Bitter",serif;
4246
+ font-size: 24px;
4247
+ line-height: 1.1666666666666667;
4248
+ font-weight: 500;
4249
+ letter-spacing: -0.5px;
4329
4250
  }
4330
4251
 
4331
- .emotion-15::before {
4252
+ .emotion-14::before {
4332
4253
  content: '';
4333
4254
  display: block;
4334
4255
  height: 0;
4335
4256
  width: 0;
4336
- margin-bottom: -0.09955357142857141em;
4257
+ margin-bottom: -0.2333333333333334em;
4337
4258
  }
4338
4259
 
4339
- .emotion-15::after {
4260
+ .emotion-14::after {
4340
4261
  content: '';
4341
4262
  display: block;
4342
4263
  height: 0;
4343
4264
  width: 0;
4344
- margin-top: -0.2839285714285714em;
4265
+ margin-top: -0.2958333333333334em;
4345
4266
  }
4346
4267
  }
4347
4268
 
4348
- .emotion-16 {
4269
+ .emotion-15 {
4349
4270
  margin-bottom: 12px;
4350
4271
  }
4351
4272
 
4352
- .emotion-17 {
4273
+ .emotion-16 {
4353
4274
  margin: 0;
4354
4275
  padding: 1px 0;
4355
- color: #0a0a0a;
4276
+ color: #0A0A0A;
4356
4277
  }
4357
4278
 
4358
- .emotion-17 svg {
4359
- fill: #0a0a0a;
4279
+ .emotion-16 svg {
4280
+ fill: #0A0A0A;
4360
4281
  }
4361
4282
 
4362
4283
  @media screen and (max-width: 767px) {
4363
- .emotion-17 {
4364
- font-family: "Noto Sans",sans-serif;
4284
+ .emotion-16 {
4285
+ font-family: "DM Sans",sans-serif;
4365
4286
  font-size: 14px;
4366
4287
  line-height: 1.4285714285714286;
4367
4288
  font-weight: 400;
4368
- letter-spacing: 0;
4289
+ letter-spacing: -0.5px;
4369
4290
  }
4370
4291
 
4371
- .emotion-17::before {
4292
+ .emotion-16::before {
4372
4293
  content: '';
4373
4294
  display: block;
4374
4295
  height: 0;
4375
4296
  width: 0;
4376
- margin-bottom: -0.32678571428571435em;
4297
+ margin-bottom: -0.3955357142857143em;
4377
4298
  }
4378
4299
 
4379
- .emotion-17::after {
4300
+ .emotion-16::after {
4380
4301
  content: '';
4381
4302
  display: block;
4382
4303
  height: 0;
4383
4304
  width: 0;
4384
- margin-top: -0.4267857142857143em;
4305
+ margin-top: -0.3955357142857143em;
4385
4306
  }
4386
4307
  }
4387
4308
 
4388
4309
  @media screen and (min-width: 768px) {
4389
- .emotion-17 {
4390
- font-family: "Noto Sans",sans-serif;
4310
+ .emotion-16 {
4311
+ font-family: "DM Sans",sans-serif;
4391
4312
  font-size: 16px;
4392
4313
  line-height: 1.5;
4393
4314
  font-weight: 400;
4394
- letter-spacing: 0;
4315
+ letter-spacing: -0.5px;
4395
4316
  }
4396
4317
 
4397
- .emotion-17::before {
4318
+ .emotion-16::before {
4398
4319
  content: '';
4399
4320
  display: block;
4400
4321
  height: 0;
4401
4322
  width: 0;
4402
- margin-bottom: -0.36250000000000004em;
4323
+ margin-bottom: -0.43125em;
4403
4324
  }
4404
4325
 
4405
- .emotion-17::after {
4326
+ .emotion-16::after {
4406
4327
  content: '';
4407
4328
  display: block;
4408
4329
  height: 0;
4409
4330
  width: 0;
4410
- margin-top: -0.4625em;
4331
+ margin-top: -0.43125em;
4411
4332
  }
4412
4333
  }
4413
4334
 
4414
- .emotion-60 {
4335
+ .emotion-56 {
4415
4336
  border-style: solid;
4416
- border-color: #e4e4e4;
4337
+ border-color: #DEDEDE;
4417
4338
  border-width: 1px;
4418
4339
  border-width: 0px;
4419
4340
  margin: 0;
@@ -4446,47 +4367,43 @@ exports[`SectionRow SectionRow without title 1`] = `
4446
4367
  <div
4447
4368
  class="emotion-6"
4448
4369
  >
4449
- <div
4370
+ <picture
4450
4371
  class="emotion-7"
4451
4372
  >
4452
- <picture
4373
+ <div
4453
4374
  class="emotion-8"
4454
- >
4455
- <div
4456
- class="emotion-9"
4457
- />
4458
- <img
4459
- alt="image alt"
4460
- class="emotion-10"
4461
- src="some-url-to-image"
4462
- />
4463
- </picture>
4464
- </div>
4375
+ />
4376
+ <img
4377
+ alt="image alt"
4378
+ class="emotion-9"
4379
+ src="some-url-to-image"
4380
+ />
4381
+ </picture>
4465
4382
  </div>
4466
4383
  <div
4467
- class="emotion-11"
4384
+ class="emotion-10"
4468
4385
  >
4469
4386
  <div
4470
- class="emotion-12"
4387
+ class="emotion-11"
4471
4388
  >
4472
4389
  <a
4473
- class="nk-card-link emotion-13"
4390
+ class="nk-card-link emotion-12"
4474
4391
  href="catagory-one/demo-1/test-headline"
4475
4392
  >
4476
4393
  <div
4477
- class="emotion-14"
4394
+ class="emotion-13"
4478
4395
  >
4479
4396
  <h3
4480
- class="emotion-15"
4397
+ class="emotion-14"
4481
4398
  >
4482
4399
  test headline
4483
4400
  </h3>
4484
4401
  </div>
4485
4402
  <div
4486
- class="emotion-16"
4403
+ class="emotion-15"
4487
4404
  >
4488
4405
  <p
4489
- class="emotion-17"
4406
+ class="emotion-16"
4490
4407
  >
4491
4408
  teaser test text
4492
4409
  </p>
@@ -4506,47 +4423,43 @@ exports[`SectionRow SectionRow without title 1`] = `
4506
4423
  <div
4507
4424
  class="emotion-6"
4508
4425
  >
4509
- <div
4426
+ <picture
4510
4427
  class="emotion-7"
4511
4428
  >
4512
- <picture
4429
+ <div
4513
4430
  class="emotion-8"
4514
- >
4515
- <div
4516
- class="emotion-9"
4517
- />
4518
- <img
4519
- alt="image alt 2"
4520
- class="emotion-10"
4521
- src="some-url-to-image"
4522
- />
4523
- </picture>
4524
- </div>
4431
+ />
4432
+ <img
4433
+ alt="image alt 2"
4434
+ class="emotion-9"
4435
+ src="some-url-to-image"
4436
+ />
4437
+ </picture>
4525
4438
  </div>
4526
4439
  <div
4527
- class="emotion-11"
4440
+ class="emotion-10"
4528
4441
  >
4529
4442
  <div
4530
- class="emotion-12"
4443
+ class="emotion-11"
4531
4444
  >
4532
4445
  <a
4533
- class="nk-card-link emotion-13"
4446
+ class="nk-card-link emotion-12"
4534
4447
  href="catagory-two/demo-2/test-headline-2"
4535
4448
  >
4536
4449
  <div
4537
- class="emotion-14"
4450
+ class="emotion-13"
4538
4451
  >
4539
4452
  <h3
4540
- class="emotion-15"
4453
+ class="emotion-14"
4541
4454
  >
4542
4455
  test headline 2
4543
4456
  </h3>
4544
4457
  </div>
4545
4458
  <div
4546
- class="emotion-16"
4459
+ class="emotion-15"
4547
4460
  >
4548
4461
  <p
4549
- class="emotion-17"
4462
+ class="emotion-16"
4550
4463
  >
4551
4464
  teaser test text 2
4552
4465
  </p>
@@ -4566,47 +4479,43 @@ exports[`SectionRow SectionRow without title 1`] = `
4566
4479
  <div
4567
4480
  class="emotion-6"
4568
4481
  >
4569
- <div
4482
+ <picture
4570
4483
  class="emotion-7"
4571
4484
  >
4572
- <picture
4485
+ <div
4573
4486
  class="emotion-8"
4574
- >
4575
- <div
4576
- class="emotion-9"
4577
- />
4578
- <img
4579
- alt="image alt 3"
4580
- class="emotion-10"
4581
- src="some-url-to-image"
4582
- />
4583
- </picture>
4584
- </div>
4487
+ />
4488
+ <img
4489
+ alt="image alt 3"
4490
+ class="emotion-9"
4491
+ src="some-url-to-image"
4492
+ />
4493
+ </picture>
4585
4494
  </div>
4586
4495
  <div
4587
- class="emotion-11"
4496
+ class="emotion-10"
4588
4497
  >
4589
4498
  <div
4590
- class="emotion-12"
4499
+ class="emotion-11"
4591
4500
  >
4592
4501
  <a
4593
- class="nk-card-link emotion-13"
4502
+ class="nk-card-link emotion-12"
4594
4503
  href="catagory-three/demo-3/test-headline-3"
4595
4504
  >
4596
4505
  <div
4597
- class="emotion-14"
4506
+ class="emotion-13"
4598
4507
  >
4599
4508
  <h3
4600
- class="emotion-15"
4509
+ class="emotion-14"
4601
4510
  >
4602
4511
  test headline 3
4603
4512
  </h3>
4604
4513
  </div>
4605
4514
  <div
4606
- class="emotion-16"
4515
+ class="emotion-15"
4607
4516
  >
4608
4517
  <p
4609
- class="emotion-17"
4518
+ class="emotion-16"
4610
4519
  >
4611
4520
  teaser test text 3
4612
4521
  </p>
@@ -4626,47 +4535,43 @@ exports[`SectionRow SectionRow without title 1`] = `
4626
4535
  <div
4627
4536
  class="emotion-6"
4628
4537
  >
4629
- <div
4538
+ <picture
4630
4539
  class="emotion-7"
4631
4540
  >
4632
- <picture
4541
+ <div
4633
4542
  class="emotion-8"
4634
- >
4635
- <div
4636
- class="emotion-9"
4637
- />
4638
- <img
4639
- alt="image alt 3"
4640
- class="emotion-10"
4641
- src="some-url-to-image"
4642
- />
4643
- </picture>
4644
- </div>
4543
+ />
4544
+ <img
4545
+ alt="image alt 3"
4546
+ class="emotion-9"
4547
+ src="some-url-to-image"
4548
+ />
4549
+ </picture>
4645
4550
  </div>
4646
4551
  <div
4647
- class="emotion-11"
4552
+ class="emotion-10"
4648
4553
  >
4649
4554
  <div
4650
- class="emotion-12"
4555
+ class="emotion-11"
4651
4556
  >
4652
4557
  <a
4653
- class="nk-card-link emotion-13"
4558
+ class="nk-card-link emotion-12"
4654
4559
  href="catagory-four/demo-4/test-headline-4"
4655
4560
  >
4656
4561
  <div
4657
- class="emotion-14"
4562
+ class="emotion-13"
4658
4563
  >
4659
4564
  <h3
4660
- class="emotion-15"
4565
+ class="emotion-14"
4661
4566
  >
4662
4567
  test headline 4
4663
4568
  </h3>
4664
4569
  </div>
4665
4570
  <div
4666
- class="emotion-16"
4571
+ class="emotion-15"
4667
4572
  >
4668
4573
  <p
4669
- class="emotion-17"
4574
+ class="emotion-16"
4670
4575
  >
4671
4576
  teaser test text 4
4672
4577
  </p>
@@ -4681,7 +4586,7 @@ exports[`SectionRow SectionRow without title 1`] = `
4681
4586
  </div>
4682
4587
  <hr
4683
4588
  aria-hidden="true"
4684
- class="emotion-60"
4589
+ class="emotion-56"
4685
4590
  data-testid="divider"
4686
4591
  />
4687
4592
  </div>