@newskit-render/core 1.44.0 → 1.48.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 (42) hide show
  1. package/CHANGELOG.md +122 -0
  2. package/__tests__/pages/[articleSlug].test.tsx +59 -18
  3. package/__tests__/pages/__snapshots__/home.test.tsx.snap +769 -1261
  4. package/components/article/Highlights.tsx +4 -33
  5. package/components/article/RelatedArticles.tsx +4 -53
  6. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +53 -43
  7. package/components/section/ArticleSlice.tsx +17 -43
  8. package/components/section/CollectionBlock.tsx +38 -6
  9. package/components/section/__tests__/ArticleSlice.test.tsx +37 -51
  10. package/components/section/__tests__/CollectionBlock.test.tsx +63 -13
  11. package/components/section/__tests__/pageBlock.test.tsx +8 -4
  12. package/components/section/index.tsx +17 -12
  13. package/components/section/layouts/Lead.tsx +36 -15
  14. package/components/section/layouts/Rows.tsx +67 -0
  15. package/components/section/layouts/{SectionRow.tsx → SectionTitle.tsx} +24 -52
  16. package/components/section/layouts/__tests__/Lead.test.tsx +31 -6
  17. package/components/section/layouts/__tests__/Rows.test.tsx +28 -0
  18. package/components/section/layouts/__tests__/SectionTitle.test.tsx +36 -0
  19. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +274 -315
  20. package/components/section/layouts/__tests__/__snapshots__/SectionTitle.test.tsx.snap +942 -0
  21. package/components/section/layouts/gridUtils.ts +12 -9
  22. package/components/section/layouts/index.tsx +2 -1
  23. package/components/section/layouts/types.ts +5 -1
  24. package/components/section/{pageBlock.ts → pageBlock.tsx} +5 -2
  25. package/components/teaser/index.tsx +7 -6
  26. package/components/teaser/teaserVariants.ts +2 -0
  27. package/components/teaser/variants/horizontal.ts +14 -0
  28. package/cypress/e2e/account/account-page.spec.js +27 -1
  29. package/cypress/e2e/account/main-api.spec.js +4 -4
  30. package/cypress/support/commands.js +2 -2
  31. package/helpers/mocks/getPageMock.ts +2 -59
  32. package/next.config.js +4 -0
  33. package/package.json +8 -7
  34. package/pages/[section]/[articleId]/[articleSlug].tsx +14 -3
  35. package/pages/api/feed.ts +19 -0
  36. package/pages/api/news-sitemap.ts +10 -2
  37. package/pages/api/sitemap.ts +10 -6
  38. package/temp/_app.tsx +209 -0
  39. package/temp/header.tsx +1 -1
  40. package/components/section/layouts/Row.tsx +0 -28
  41. package/components/section/layouts/__tests__/SectionRow.test.tsx +0 -56
  42. package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap +0 -4542
package/__tests__/pages/__snapshots__/home.test.tsx.snap CHANGED
@@ -687,96 +687,37 @@ exports[`getServerSideProps Homepage 1`] = `
687
687
  margin-bottom: 40px;
688
688
  }
689
689
 
690
- .emotion-6 {
691
- box-sizing: border-box;
692
- -webkit-background-clip: padding-box;
693
- background-clip: padding-box;
694
- display: -webkit-box;
695
- display: -webkit-flex;
696
- display: -ms-flexbox;
697
- display: flex;
698
- -webkit-box-flex-wrap: wrap;
699
- -webkit-flex-wrap: wrap;
700
- -ms-flex-wrap: wrap;
701
- flex-wrap: wrap;
702
- -webkit-flex-direction: row;
703
- -ms-flex-direction: row;
704
- flex-direction: row;
705
- }
706
-
707
- @media screen {
708
- .emotion-6 {
709
- margin: -40px 8px 0 8px;
710
- }
711
- }
712
-
713
- @media screen and (min-width: 480px) {
714
- .emotion-6 {
715
- margin: -40px 8px 0 8px;
716
- }
690
+ .emotion-5 {
691
+ display: grid;
692
+ -webkit-column-gap: 24px;
693
+ column-gap: 24px;
717
694
  }
718
695
 
719
- @media screen and (min-width: 768px) {
720
- .emotion-6 {
721
- margin: -32px 8px 0 8px;
696
+ @media screen and (max-width: 767px) {
697
+ .emotion-5 {
698
+ row-gap: 40px;
722
699
  }
723
700
  }
724
701
 
725
- @media screen and (min-width: 1024px) {
726
- .emotion-6 {
727
- margin: -32px 12px 0 12px;
702
+ @media screen and (min-width: 768px) and (max-width: 1439px) {
703
+ .emotion-5 {
704
+ row-gap: 32px;
728
705
  }
729
706
  }
730
707
 
731
708
  @media screen and (min-width: 1440px) {
732
- .emotion-6 {
733
- margin: -0px 12px 0 12px;
734
- }
735
- }
736
-
737
- .emotion-7 {
738
- box-sizing: border-box;
739
- -webkit-background-clip: padding-box;
740
- background-clip: padding-box;
741
- -webkit-flex: 1 0 auto;
742
- -ms-flex: 1 0 auto;
743
- flex: 1 0 auto;
744
- }
745
-
746
- @media screen {
747
- .emotion-7 {
748
- padding: 0 8px;
749
- margin-top: 40px;
750
- -webkit-flex-basis: 100%;
751
- -ms-flex-preferred-size: 100%;
752
- flex-basis: 100%;
753
- max-width: 100%;
754
- }
755
- }
756
-
757
- @media screen and (min-width: 768px) {
758
- .emotion-7 {
759
- margin-top: 32px;
709
+ .emotion-5 {
710
+ row-gap: 0;
760
711
  }
761
712
  }
762
713
 
763
714
  @media screen and (min-width: 1024px) {
764
- .emotion-7 {
765
- padding: 0 12px;
766
- }
767
- }
768
-
769
- @media screen and (min-width: 1440px) {
770
- .emotion-7 {
771
- margin-top: 0;
772
- -webkit-flex-basis: 66.66666666666667%;
773
- -ms-flex-preferred-size: 66.66666666666667%;
774
- flex-basis: 66.66666666666667%;
775
- max-width: 66.66666666666667%;
715
+ .emotion-5 {
716
+ grid-template-columns: 2fr 1fr;
776
717
  }
777
718
  }
778
719
 
779
- .emotion-8 {
720
+ .emotion-7 {
780
721
  box-sizing: border-box;
781
722
  overflow: hidden;
782
723
  color: #2E2E2E;
@@ -791,25 +732,25 @@ exports[`getServerSideProps Homepage 1`] = `
791
732
  flex-direction: column;
792
733
  }
793
734
 
794
- .emotion-9 {
735
+ .emotion-8 {
795
736
  box-sizing: border-box;
796
737
  display: block;
797
738
  position: relative;
798
739
  }
799
740
 
800
741
  @media screen and (max-width: 767px) {
801
- .emotion-9 {
742
+ .emotion-8 {
802
743
  margin-bottom: 20px;
803
744
  }
804
745
  }
805
746
 
806
747
  @media screen and (min-width: 768px) {
807
- .emotion-9 {
748
+ .emotion-8 {
808
749
  margin-bottom: 24px;
809
750
  }
810
751
  }
811
752
 
812
- .emotion-10 {
753
+ .emotion-9 {
813
754
  position: relative;
814
755
  width: 100%;
815
756
  display: block;
@@ -819,7 +760,7 @@ exports[`getServerSideProps Homepage 1`] = `
819
760
  border-radius: 0;
820
761
  }
821
762
 
822
- .emotion-11 {
763
+ .emotion-10 {
823
764
  opacity: 1;
824
765
  display: block;
825
766
  border-radius: inherit;
@@ -829,20 +770,32 @@ exports[`getServerSideProps Homepage 1`] = `
829
770
  animation: fadeIn 300ms;
830
771
  }
831
772
 
832
- .emotion-12 {
773
+ .emotion-11 {
833
774
  box-sizing: border-box;
834
775
  }
835
776
 
836
- .emotion-13 {
777
+ .emotion-12 {
837
778
  box-sizing: border-box;
838
779
  padding: 0;
839
780
  }
840
781
 
841
- .emotion-13 a:not(.nk-card-link) {
782
+ .emotion-12 a:not(.nk-card-link) {
842
783
  z-index: 2;
843
784
  position: relative;
844
785
  }
845
786
 
787
+ @media screen and (max-width: 767px) {
788
+ .emotion-13 {
789
+ margin-bottom: 20px;
790
+ }
791
+ }
792
+
793
+ @media screen and (min-width: 768px) {
794
+ .emotion-13 {
795
+ margin-bottom: 24px;
796
+ }
797
+ }
798
+
846
799
  .emotion-14 {
847
800
  -webkit-text-decoration: none;
848
801
  text-decoration: none;
@@ -902,27 +855,6 @@ exports[`getServerSideProps Homepage 1`] = `
902
855
 
903
856
  @media screen and (max-width: 767px) {
904
857
  .emotion-15 {
905
- margin-bottom: 20px;
906
- }
907
- }
908
-
909
- @media screen and (min-width: 768px) {
910
- .emotion-15 {
911
- margin-bottom: 24px;
912
- }
913
- }
914
-
915
- .emotion-16 {
916
- margin: 0;
917
- color: #0A0A0A;
918
- }
919
-
920
- .emotion-16 svg {
921
- fill: #0A0A0A;
922
- }
923
-
924
- @media screen and (max-width: 767px) {
925
- .emotion-16 {
926
858
  font-family: "Bitter",serif;
927
859
  font-size: 24px;
928
860
  line-height: 27px;
@@ -931,13 +863,13 @@ exports[`getServerSideProps Homepage 1`] = `
931
863
  padding: 0.5px 0px;
932
864
  }
933
865
 
934
- .emotion-16::before {
866
+ .emotion-15::before {
935
867
  content: '';
936
868
  margin-bottom: -0.2055em;
937
869
  display: block;
938
870
  }
939
871
 
940
- .emotion-16::after {
872
+ .emotion-15::after {
941
873
  content: '';
942
874
  margin-top: -0.2275em;
943
875
  display: block;
@@ -945,7 +877,7 @@ exports[`getServerSideProps Homepage 1`] = `
945
877
  }
946
878
 
947
879
  @media screen and (min-width: 768px) and (max-width: 1439px) {
948
- .emotion-16 {
880
+ .emotion-15 {
949
881
  font-family: "Bitter",serif;
950
882
  font-size: 36px;
951
883
  line-height: 40.5px;
@@ -954,13 +886,13 @@ exports[`getServerSideProps Homepage 1`] = `
954
886
  padding: 0.5px 0px;
955
887
  }
956
888
 
957
- .emotion-16::before {
889
+ .emotion-15::before {
958
890
  content: '';
959
891
  margin-bottom: -0.2055em;
960
892
  display: block;
961
893
  }
962
894
 
963
- .emotion-16::after {
895
+ .emotion-15::after {
964
896
  content: '';
965
897
  margin-top: -0.2275em;
966
898
  display: block;
@@ -968,7 +900,7 @@ exports[`getServerSideProps Homepage 1`] = `
968
900
  }
969
901
 
970
902
  @media screen and (min-width: 1440px) {
971
- .emotion-16 {
903
+ .emotion-15 {
972
904
  font-family: "Bitter",serif;
973
905
  font-size: 40px;
974
906
  line-height: 45px;
@@ -977,414 +909,401 @@ exports[`getServerSideProps Homepage 1`] = `
977
909
  padding: 0.5px 0px;
978
910
  }
979
911
 
980
- .emotion-16::before {
912
+ .emotion-15::before {
981
913
  content: '';
982
914
  margin-bottom: -0.2055em;
983
915
  display: block;
984
916
  }
985
917
 
986
- .emotion-16::after {
918
+ .emotion-15::after {
987
919
  content: '';
988
920
  margin-top: -0.2275em;
989
921
  display: block;
990
922
  }
991
923
  }
992
924
 
925
+ .emotion-16 {
926
+ display: inline;
927
+ font: inherit;
928
+ margin: 0;
929
+ color: #2E2E2E;
930
+ }
931
+
932
+ .emotion-16:hover:not(:disabled) {
933
+ color: #2B4AAB;
934
+ -webkit-text-decoration: underline;
935
+ text-decoration: underline;
936
+ }
937
+
938
+ .emotion-16:active:not(:disabled) {
939
+ color: #213A82;
940
+ -webkit-text-decoration: underline;
941
+ text-decoration: underline;
942
+ }
943
+
944
+ .emotion-16:visited:not(:disabled) {
945
+ color: #5E44E4;
946
+ }
947
+
993
948
  .emotion-17 {
994
- box-sizing: border-box;
995
- -webkit-background-clip: padding-box;
996
- background-clip: padding-box;
997
- -webkit-flex: 1 0 auto;
998
- -ms-flex: 1 0 auto;
999
- flex: 1 0 auto;
949
+ display: grid;
950
+ height: 100%;
1000
951
  }
1001
952
 
1002
- @media screen {
953
+ @media screen and (max-width: 767px) {
1003
954
  .emotion-17 {
1004
- padding: 0 8px;
1005
- margin-top: 40px;
1006
- -webkit-flex-basis: 100%;
1007
- -ms-flex-preferred-size: 100%;
1008
- flex-basis: 100%;
1009
- max-width: 100%;
955
+ row-gap: 40px;
1010
956
  }
1011
957
  }
1012
958
 
1013
- @media screen and (min-width: 768px) {
959
+ @media screen and (min-width: 768px) and (max-width: 1439px) {
1014
960
  .emotion-17 {
1015
- margin-top: 32px;
961
+ row-gap: 32px;
1016
962
  }
1017
963
  }
1018
964
 
1019
- @media screen and (min-width: 1024px) {
965
+ @media screen and (min-width: 1440px) {
1020
966
  .emotion-17 {
1021
- padding: 0 12px;
967
+ row-gap: 24px;
1022
968
  }
1023
969
  }
1024
970
 
1025
- @media screen and (min-width: 1440px) {
971
+ @media screen and (min-width: 768px) {
1026
972
  .emotion-17 {
1027
- margin-top: 0;
1028
- -webkit-flex-basis: 33.333333333333336%;
1029
- -ms-flex-preferred-size: 33.333333333333336%;
1030
- flex-basis: 33.333333333333336%;
1031
- max-width: 33.333333333333336%;
973
+ -webkit-column-gap: 20px;
974
+ column-gap: 20px;
1032
975
  }
1033
976
  }
1034
977
 
1035
- .emotion-19 {
1036
- box-sizing: border-box;
1037
- -webkit-background-clip: padding-box;
1038
- background-clip: padding-box;
1039
- display: -webkit-box;
1040
- display: -webkit-flex;
1041
- display: -ms-flexbox;
1042
- display: flex;
1043
- -webkit-box-flex-wrap: wrap;
1044
- -webkit-flex-wrap: wrap;
1045
- -ms-flex-wrap: wrap;
1046
- flex-wrap: wrap;
1047
- -webkit-flex-direction: row;
1048
- -ms-flex-direction: row;
1049
- flex-direction: row;
978
+ @media screen and (max-width: 767px) {
979
+ .emotion-17 {
980
+ grid-template-columns: 1fr;
981
+ }
1050
982
  }
1051
983
 
1052
- @media screen {
1053
- .emotion-19 {
1054
- margin: -40px -8px 0 -8px;
984
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
985
+ .emotion-17 {
986
+ grid-template-columns: 1fr 1fr;
1055
987
  }
1056
988
  }
1057
989
 
1058
- @media screen and (min-width: 480px) {
1059
- .emotion-19 {
1060
- margin: -40px -8px 0 -8px;
990
+ @media screen and (min-width: 1024px) {
991
+ .emotion-17 {
992
+ grid-template-columns: 1fr;
1061
993
  }
1062
994
  }
1063
995
 
1064
- @media screen and (min-width: 768px) {
1065
- .emotion-19 {
1066
- margin: -32px -8px 0 -8px;
996
+ @media screen and (min-width: 1024px) {
997
+ .emotion-17 {
998
+ -webkit-box-pack: stretch;
999
+ -ms-flex-pack: stretch;
1000
+ -webkit-justify-content: stretch;
1001
+ justify-content: stretch;
1067
1002
  }
1068
1003
  }
1069
1004
 
1070
1005
  @media screen and (min-width: 1024px) {
1071
- .emotion-19 {
1072
- margin: -32px -12px 0 -12px;
1006
+ .emotion-17 {
1007
+ -webkit-align-content: space-between;
1008
+ -ms-flex-line-pack: space-between;
1009
+ align-content: space-between;
1073
1010
  }
1074
1011
  }
1075
1012
 
1076
- @media screen and (min-width: 1440px) {
1077
- .emotion-19 {
1078
- margin: -24px -12px 0 -12px;
1079
- }
1013
+ .emotion-19 {
1014
+ box-sizing: border-box;
1015
+ overflow: hidden;
1016
+ color: #2E2E2E;
1017
+ background-color: #FFFFFF;
1018
+ position: relative;
1019
+ display: -webkit-box;
1020
+ display: -webkit-flex;
1021
+ display: -ms-flexbox;
1022
+ display: flex;
1023
+ -webkit-flex-direction: rowfalse;
1024
+ -ms-flex-direction: rowfalse;
1025
+ flex-direction: rowfalse;
1080
1026
  }
1081
1027
 
1082
1028
  .emotion-20 {
1083
1029
  box-sizing: border-box;
1084
- -webkit-background-clip: padding-box;
1085
- background-clip: padding-box;
1086
- -webkit-flex: 1 0 auto;
1087
- -ms-flex: 1 0 auto;
1088
- flex: 1 0 auto;
1030
+ display: block;
1031
+ position: relative;
1032
+ -webkit-flex: 1;
1033
+ -ms-flex: 1;
1034
+ flex: 1;
1089
1035
  }
1090
1036
 
1091
- @media screen {
1037
+ @media screen and (max-width: 479px) {
1092
1038
  .emotion-20 {
1093
- padding: 0 8px;
1094
- margin-top: 40px;
1095
- -webkit-flex-basis: 100%;
1096
- -ms-flex-preferred-size: 100%;
1097
- flex-basis: 100%;
1098
- max-width: 100%;
1039
+ margin-right: 16px;
1099
1040
  }
1100
1041
  }
1101
1042
 
1102
- @media screen and (min-width: 768px) {
1043
+ @media screen and (min-width: 480px) and (max-width: 767px) {
1103
1044
  .emotion-20 {
1104
- margin-top: 32px;
1105
- -webkit-flex-basis: 50%;
1106
- -ms-flex-preferred-size: 50%;
1107
- flex-basis: 50%;
1108
- max-width: 50%;
1045
+ margin-right: 16px;
1109
1046
  }
1110
1047
  }
1111
1048
 
1112
- @media screen and (min-width: 1024px) {
1049
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
1113
1050
  .emotion-20 {
1114
- padding: 0 12px;
1051
+ margin-right: 24px;
1115
1052
  }
1116
1053
  }
1117
1054
 
1118
- @media screen and (min-width: 1440px) {
1055
+ @media screen and (min-width: 1024px) {
1119
1056
  .emotion-20 {
1120
- margin-top: 24px;
1121
- -webkit-flex-basis: 100%;
1122
- -ms-flex-preferred-size: 100%;
1123
- flex-basis: 100%;
1124
- max-width: 100%;
1057
+ margin-right: 24px;
1125
1058
  }
1126
1059
  }
1127
1060
 
1128
- .emotion-22 {
1061
+ .emotion-23 {
1129
1062
  box-sizing: border-box;
1130
- display: block;
1131
- position: relative;
1132
- margin-bottom: 20px;
1063
+ display: -webkit-box;
1064
+ display: -webkit-flex;
1065
+ display: -ms-flexbox;
1066
+ display: flex;
1067
+ -webkit-flex-direction: column;
1068
+ -ms-flex-direction: column;
1069
+ flex-direction: column;
1070
+ -webkit-flex: 1;
1071
+ -ms-flex: 1;
1072
+ flex: 1;
1133
1073
  }
1134
1074
 
1135
- .emotion-28 {
1136
- margin-bottom: 16px;
1075
+ .emotion-24 {
1076
+ box-sizing: border-box;
1077
+ -webkit-flex: 1;
1078
+ -ms-flex: 1;
1079
+ flex: 1;
1080
+ padding: 0;
1137
1081
  }
1138
1082
 
1139
- .emotion-29 {
1140
- margin: 0;
1141
- color: #0A0A0A;
1083
+ .emotion-24 a:not(.nk-card-link) {
1084
+ z-index: 2;
1085
+ position: relative;
1142
1086
  }
1143
1087
 
1144
- .emotion-29 svg {
1145
- fill: #0A0A0A;
1088
+ .emotion-25 {
1089
+ margin-bottom: 8px;
1146
1090
  }
1147
1091
 
1148
- @media screen and (max-width: 767px) {
1149
- .emotion-29 {
1092
+ @media screen and (max-width: 479px) {
1093
+ .emotion-27 {
1150
1094
  font-family: "Bitter",serif;
1151
- font-size: 24px;
1152
- line-height: 27px;
1095
+ font-size: 20px;
1096
+ line-height: 22.5px;
1153
1097
  font-weight: 500;
1154
1098
  letter-spacing: 0;
1155
1099
  padding: 0.5px 0px;
1156
1100
  }
1157
1101
 
1158
- .emotion-29::before {
1102
+ .emotion-27::before {
1159
1103
  content: '';
1160
1104
  margin-bottom: -0.2055em;
1161
1105
  display: block;
1162
1106
  }
1163
1107
 
1164
- .emotion-29::after {
1108
+ .emotion-27::after {
1165
1109
  content: '';
1166
1110
  margin-top: -0.2275em;
1167
1111
  display: block;
1168
1112
  }
1169
1113
  }
1170
1114
 
1171
- @media screen and (min-width: 768px) and (max-width: 1439px) {
1172
- .emotion-29 {
1115
+ @media screen and (min-width: 480px) and (max-width: 767px) {
1116
+ .emotion-27 {
1173
1117
  font-family: "Bitter",serif;
1174
- font-size: 28px;
1175
- line-height: 31.5px;
1118
+ font-size: 20px;
1119
+ line-height: 22.5px;
1176
1120
  font-weight: 500;
1177
1121
  letter-spacing: 0;
1178
1122
  padding: 0.5px 0px;
1179
1123
  }
1180
1124
 
1181
- .emotion-29::before {
1125
+ .emotion-27::before {
1182
1126
  content: '';
1183
1127
  margin-bottom: -0.2055em;
1184
1128
  display: block;
1185
1129
  }
1186
1130
 
1187
- .emotion-29::after {
1131
+ .emotion-27::after {
1188
1132
  content: '';
1189
1133
  margin-top: -0.2275em;
1190
1134
  display: block;
1191
1135
  }
1192
1136
  }
1193
1137
 
1194
- @media screen and (min-width: 1440px) {
1195
- .emotion-29 {
1138
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
1139
+ .emotion-27 {
1196
1140
  font-family: "Bitter",serif;
1197
- font-size: 32px;
1198
- line-height: 36px;
1141
+ font-size: 22px;
1142
+ line-height: 24.75px;
1199
1143
  font-weight: 500;
1200
1144
  letter-spacing: 0;
1201
1145
  padding: 0.5px 0px;
1202
1146
  }
1203
1147
 
1204
- .emotion-29::before {
1148
+ .emotion-27::before {
1205
1149
  content: '';
1206
1150
  margin-bottom: -0.2055em;
1207
1151
  display: block;
1208
1152
  }
1209
1153
 
1210
- .emotion-29::after {
1154
+ .emotion-27::after {
1211
1155
  content: '';
1212
1156
  margin-top: -0.2275em;
1213
1157
  display: block;
1214
1158
  }
1215
1159
  }
1216
1160
 
1217
- .emotion-41 {
1218
- background:color: transparent;
1219
- }
1161
+ @media screen and (min-width: 1024px) {
1162
+ .emotion-27 {
1163
+ font-family: "Bitter",serif;
1164
+ font-size: 28px;
1165
+ line-height: 31.5px;
1166
+ font-weight: 500;
1167
+ letter-spacing: 0;
1168
+ padding: 0.5px 0px;
1169
+ }
1220
1170
 
1221
- .emotion-42 {
1222
- margin-bottom: 32px;
1223
- background: #3358CC;
1224
- }
1171
+ .emotion-27::before {
1172
+ content: '';
1173
+ margin-bottom: -0.2055em;
1174
+ display: block;
1175
+ }
1225
1176
 
1226
- .emotion-43 {
1227
- display: -webkit-box;
1228
- display: -webkit-flex;
1229
- display: -ms-flexbox;
1230
- display: flex;
1231
- height: 100%;
1232
- -webkit-align-items: center;
1233
- -webkit-box-align: center;
1234
- -ms-flex-align: center;
1235
- align-items: center;
1236
- -webkit-flex-direction: row;
1237
- -ms-flex-direction: row;
1238
- flex-direction: row;
1239
- -webkit-box-pack: justify;
1240
- -webkit-justify-content: space-between;
1241
- justify-content: space-between;
1242
- background-color: transparent;
1243
- }
1244
-
1245
- @media screen and (max-width: 1023px) {
1246
- .emotion-43 {
1247
- padding: 12px 16px;
1248
- }
1249
- }
1250
-
1251
- @media screen and (min-width: 1024px) {
1252
- .emotion-43 {
1253
- padding: 16px 24px;
1177
+ .emotion-27::after {
1178
+ content: '';
1179
+ margin-top: -0.2275em;
1180
+ display: block;
1254
1181
  }
1255
1182
  }
1256
1183
 
1257
- .emotion-44 {
1258
- margin-right: 16px;
1259
- -webkit-box-flex: 1;
1260
- -webkit-flex-grow: 1;
1261
- -ms-flex-positive: 1;
1262
- flex-grow: 1;
1184
+ .emotion-41 {
1185
+ display: grid;
1186
+ -webkit-column-gap: 24px;
1187
+ column-gap: 24px;
1263
1188
  }
1264
1189
 
1265
1190
  @media screen and (max-width: 767px) {
1266
- .emotion-45 {
1267
- font-family: "Bitter",serif;
1268
- font-size: 28px;
1269
- line-height: 31.5px;
1270
- font-weight: 500;
1271
- letter-spacing: 0;
1272
- padding: 0.5px 0px;
1273
- }
1274
-
1275
- .emotion-45::before {
1276
- content: '';
1277
- margin-bottom: -0.2055em;
1278
- display: block;
1279
- }
1280
-
1281
- .emotion-45::after {
1282
- content: '';
1283
- margin-top: -0.2275em;
1284
- display: block;
1191
+ .emotion-41 {
1192
+ row-gap: 40px;
1285
1193
  }
1286
1194
  }
1287
1195
 
1288
1196
  @media screen and (min-width: 768px) and (max-width: 1439px) {
1289
- .emotion-45 {
1290
- font-family: "Bitter",serif;
1291
- font-size: 32px;
1292
- line-height: 36px;
1293
- font-weight: 500;
1294
- letter-spacing: 0;
1295
- padding: 0.5px 0px;
1197
+ .emotion-41 {
1198
+ row-gap: 32px;
1296
1199
  }
1200
+ }
1297
1201
 
1298
- .emotion-45::before {
1299
- content: '';
1300
- margin-bottom: -0.2055em;
1301
- display: block;
1202
+ @media screen and (min-width: 1440px) {
1203
+ .emotion-41 {
1204
+ row-gap: 0;
1302
1205
  }
1206
+ }
1303
1207
 
1304
- .emotion-45::after {
1305
- content: '';
1306
- margin-top: -0.2275em;
1307
- display: block;
1208
+ @media screen and (max-width: 767px) {
1209
+ .emotion-41 {
1210
+ grid-template-columns: 1fr;
1308
1211
  }
1309
1212
  }
1310
1213
 
1311
- @media screen and (min-width: 1440px) {
1312
- .emotion-45 {
1313
- font-family: "Bitter",serif;
1314
- font-size: 36px;
1315
- line-height: 40.5px;
1316
- font-weight: 500;
1317
- letter-spacing: 0;
1318
- padding: 0.5px 0px;
1214
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
1215
+ .emotion-41 {
1216
+ grid-template-columns: 1fr 1fr;
1319
1217
  }
1218
+ }
1320
1219
 
1321
- .emotion-45::before {
1322
- content: '';
1323
- margin-bottom: -0.2055em;
1324
- display: block;
1220
+ @media screen and (min-width: 1024px) {
1221
+ .emotion-41 {
1222
+ grid-template-columns: 1fr 1fr 1fr 1fr;
1325
1223
  }
1224
+ }
1326
1225
 
1327
- .emotion-45::after {
1328
- content: '';
1329
- margin-top: -0.2275em;
1330
- display: block;
1331
- }
1226
+ .emotion-45 {
1227
+ position: relative;
1228
+ width: 100%;
1229
+ display: block;
1230
+ padding-top: 0;
1231
+ height: 0;
1232
+ width: 100%;
1233
+ border-radius: 0;
1234
+ background-color: #F4F4F4;
1332
1235
  }
1333
1236
 
1334
- .emotion-46 {
1335
- display: inline;
1336
- font: inherit;
1337
- margin: 0;
1338
- color: #FFFFFF;
1237
+ .emotion-45 svg {
1238
+ fill: #C0C0C0;
1339
1239
  }
1340
1240
 
1341
- .emotion-46 svg {
1342
- fill: #FFFFFF;
1241
+ .emotion-46 {
1242
+ top: 0;
1243
+ left: 0;
1244
+ position: absolute;
1245
+ display: -webkit-box;
1246
+ display: -webkit-flex;
1247
+ display: -ms-flexbox;
1248
+ display: flex;
1249
+ -webkit-flex-direction: column;
1250
+ -ms-flex-direction: column;
1251
+ flex-direction: column;
1252
+ -webkit-box-pack: center;
1253
+ -ms-flex-pack: center;
1254
+ -webkit-justify-content: center;
1255
+ justify-content: center;
1256
+ width: 100%;
1257
+ height: 100%;
1258
+ margin: 0;
1343
1259
  }
1344
1260
 
1345
- @media screen {
1346
- .emotion-47 {
1347
- display: none;
1348
- }
1261
+ .emotion-47 {
1262
+ opacity: 0;
1263
+ display: block;
1264
+ border-radius: inherit;
1265
+ height: auto;
1266
+ width: 100%;
1267
+ top: 0;
1268
+ left: 0;
1269
+ position: absolute;
1349
1270
  }
1350
1271
 
1351
- @media screen and (min-width: 480px) {
1352
- .emotion-47 {
1353
- display: block;
1354
- }
1272
+ .emotion-90 {
1273
+ display: inline-block;
1274
+ transition-property: color;
1275
+ transition-duration: 200ms;
1276
+ transition-timing-function: cubic-bezier(0, 0, .5, 1);
1277
+ color: #3358CC;
1278
+ -webkit-text-decoration: none;
1279
+ text-decoration: none;
1355
1280
  }
1356
1281
 
1357
- @media screen and (min-width: 768px) {
1358
- .emotion-47 {
1359
- display: block;
1360
- }
1282
+ .emotion-90 svg {
1283
+ fill: #3358CC;
1361
1284
  }
1362
1285
 
1363
- @media screen and (min-width: 1024px) {
1364
- .emotion-47 {
1365
- display: block;
1366
- }
1286
+ .emotion-90:hover:not(:disabled) {
1287
+ color: #2B4AAB;
1288
+ -webkit-text-decoration: underline;
1289
+ text-decoration: underline;
1367
1290
  }
1368
1291
 
1369
- @media screen and (min-width: 1440px) {
1370
- .emotion-47 {
1371
- display: block;
1372
- }
1292
+ .emotion-90:hover:not(:disabled) svg {
1293
+ fill: #2B4AAB;
1373
1294
  }
1374
1295
 
1375
- .emotion-48 {
1376
- display: inline-block;
1377
- transition-property: color;
1378
- transition-duration: 200ms;
1379
- transition-timing-function: cubic-bezier(0, 0, .5, 1);
1380
- color: #FFFFFF;
1296
+ .emotion-90:active:not(:disabled) {
1297
+ color: #213A82;
1298
+ -webkit-text-decoration: underline;
1299
+ text-decoration: underline;
1381
1300
  }
1382
1301
 
1383
- .emotion-48 svg {
1384
- fill: #FFFFFF;
1302
+ .emotion-90:active:not(:disabled) svg {
1303
+ fill: #213A82;
1385
1304
  }
1386
1305
 
1387
- .emotion-49 {
1306
+ .emotion-91 {
1388
1307
  display: -webkit-box;
1389
1308
  display: -webkit-flex;
1390
1309
  display: -ms-flexbox;
@@ -1401,20 +1320,9 @@ exports[`getServerSideProps Homepage 1`] = `
1401
1320
  -ms-flex-pack: start;
1402
1321
  -webkit-justify-content: flex-start;
1403
1322
  justify-content: flex-start;
1404
- margin-left: calc(-8px/2);
1405
- margin-right: calc(-8px/2);
1406
1323
  }
1407
1324
 
1408
- .emotion-50 {
1409
- display: -webkit-inline-box;
1410
- display: -webkit-inline-flex;
1411
- display: -ms-inline-flexbox;
1412
- display: inline-flex;
1413
- margin-left: calc(8px/2);
1414
- margin-right: calc(8px/2);
1415
- }
1416
-
1417
- .emotion-51 {
1325
+ .emotion-92 {
1418
1326
  margin: 0;
1419
1327
  font-family: "Poppins",sans-serif;
1420
1328
  font-size: 14px;
@@ -1426,141 +1334,108 @@ exports[`getServerSideProps Homepage 1`] = `
1426
1334
  display: block;
1427
1335
  }
1428
1336
 
1429
- .emotion-51::before {
1337
+ .emotion-92::before {
1430
1338
  content: '';
1431
1339
  margin-bottom: -0.403em;
1432
1340
  display: block;
1433
1341
  }
1434
1342
 
1435
- .emotion-51::after {
1343
+ .emotion-92::after {
1436
1344
  content: '';
1437
1345
  margin-top: -0.4em;
1438
1346
  display: block;
1439
1347
  }
1440
1348
 
1441
- .emotion-53 {
1442
- display: inline-block;
1443
- vertical-align: middle;
1444
- overflow: hidden;
1445
- fill: #2E2E2E;
1446
- vertical-align: unset;
1447
- display: inline-block;
1448
- top: 1px;
1349
+ .emotion-111 {
1449
1350
  position: relative;
1351
+ width: 100%;
1352
+ display: block;
1353
+ padding-top: 56%;
1354
+ height: 0;
1355
+ width: 100%;
1356
+ border-radius: 0;
1357
+ background-color: #F4F4F4;
1450
1358
  }
1451
1359
 
1452
- .emotion-53.emotion-53 {
1453
- width: 24px;
1454
- height: 24px;
1455
- }
1456
-
1457
- .emotion-58 {
1458
- box-sizing: border-box;
1459
- -webkit-background-clip: padding-box;
1460
- background-clip: padding-box;
1461
- -webkit-flex: 1 0 auto;
1462
- -ms-flex: 1 0 auto;
1463
- flex: 1 0 auto;
1464
- }
1465
-
1466
- @media screen {
1467
- .emotion-58 {
1468
- padding: 0 8px;
1469
- margin-top: 40px;
1470
- -webkit-flex-basis: 100%;
1471
- -ms-flex-preferred-size: 100%;
1472
- flex-basis: 100%;
1473
- max-width: 100%;
1474
- }
1475
- }
1476
-
1477
- @media screen and (min-width: 768px) {
1478
- .emotion-58 {
1479
- margin-top: 32px;
1480
- -webkit-flex-basis: 50%;
1481
- -ms-flex-preferred-size: 50%;
1482
- flex-basis: 50%;
1483
- max-width: 50%;
1484
- }
1360
+ .emotion-111 svg {
1361
+ fill: #C0C0C0;
1485
1362
  }
1486
1363
 
1487
- @media screen and (min-width: 1024px) {
1488
- .emotion-58 {
1489
- padding: 0 12px;
1490
- }
1364
+ .emotion-118 {
1365
+ display: inline;
1366
+ font: inherit;
1367
+ margin: 0;
1368
+ color: #0A0A0A;
1491
1369
  }
1492
1370
 
1493
- @media screen and (min-width: 1440px) {
1494
- .emotion-58 {
1495
- margin-top: 0;
1496
- -webkit-flex-basis: 25%;
1497
- -ms-flex-preferred-size: 25%;
1498
- flex-basis: 25%;
1499
- max-width: 25%;
1500
- }
1371
+ .emotion-118 svg {
1372
+ fill: #0A0A0A;
1501
1373
  }
1502
1374
 
1503
- .emotion-61 {
1375
+ .emotion-123 {
1504
1376
  position: relative;
1505
1377
  width: 100%;
1506
1378
  display: block;
1507
- padding-top: 0;
1379
+ padding-top: 66%;
1508
1380
  height: 0;
1509
1381
  width: 100%;
1510
1382
  border-radius: 0;
1511
1383
  background-color: #F4F4F4;
1512
1384
  }
1513
1385
 
1514
- .emotion-61 svg {
1386
+ .emotion-123 svg {
1515
1387
  fill: #C0C0C0;
1516
1388
  }
1517
1389
 
1518
- .emotion-62 {
1519
- top: 0;
1520
- left: 0;
1521
- position: absolute;
1522
- display: -webkit-box;
1523
- display: -webkit-flex;
1524
- display: -ms-flexbox;
1525
- display: flex;
1526
- -webkit-flex-direction: column;
1527
- -ms-flex-direction: column;
1528
- flex-direction: column;
1529
- -webkit-box-pack: center;
1530
- -ms-flex-pack: center;
1531
- -webkit-justify-content: center;
1532
- justify-content: center;
1533
- width: 100%;
1534
- height: 100%;
1535
- margin: 0;
1390
+ .emotion-143 {
1391
+ display: grid;
1392
+ -webkit-column-gap: 24px;
1393
+ column-gap: 24px;
1536
1394
  }
1537
1395
 
1538
- .emotion-63 {
1539
- opacity: 0;
1540
- display: block;
1541
- border-radius: inherit;
1542
- height: auto;
1543
- width: 100%;
1544
- top: 0;
1545
- left: 0;
1546
- position: absolute;
1396
+ @media screen and (max-width: 767px) {
1397
+ .emotion-143 {
1398
+ row-gap: 40px;
1399
+ }
1547
1400
  }
1548
1401
 
1549
- .emotion-67 {
1550
- margin-bottom: 20px;
1402
+ @media screen and (min-width: 768px) and (max-width: 1439px) {
1403
+ .emotion-143 {
1404
+ row-gap: 32px;
1405
+ }
1551
1406
  }
1552
1407
 
1553
- .emotion-68 {
1554
- margin: 0;
1555
- color: #0A0A0A;
1408
+ @media screen and (min-width: 1440px) {
1409
+ .emotion-143 {
1410
+ row-gap: 0;
1411
+ }
1556
1412
  }
1557
1413
 
1558
- .emotion-68 svg {
1559
- fill: #0A0A0A;
1414
+ @media screen and (max-width: 767px) {
1415
+ .emotion-143 {
1416
+ grid-template-columns: 1fr;
1417
+ }
1418
+ }
1419
+
1420
+ @media screen and (min-width: 768px) {
1421
+ .emotion-143 {
1422
+ grid-template-columns: 1fr 1fr;
1423
+ }
1424
+ }
1425
+
1426
+ .emotion-146 {
1427
+ box-sizing: border-box;
1428
+ display: block;
1429
+ position: relative;
1430
+ margin-bottom: 20px;
1431
+ }
1432
+
1433
+ .emotion-152 {
1434
+ margin-bottom: 20px;
1560
1435
  }
1561
1436
 
1562
1437
  @media screen and (max-width: 767px) {
1563
- .emotion-68 {
1438
+ .emotion-154 {
1564
1439
  font-family: "Bitter",serif;
1565
1440
  font-size: 20px;
1566
1441
  line-height: 22.5px;
@@ -1569,13 +1444,13 @@ exports[`getServerSideProps Homepage 1`] = `
1569
1444
  padding: 0.5px 0px;
1570
1445
  }
1571
1446
 
1572
- .emotion-68::before {
1447
+ .emotion-154::before {
1573
1448
  content: '';
1574
1449
  margin-bottom: -0.2055em;
1575
1450
  display: block;
1576
1451
  }
1577
1452
 
1578
- .emotion-68::after {
1453
+ .emotion-154::after {
1579
1454
  content: '';
1580
1455
  margin-top: -0.2275em;
1581
1456
  display: block;
@@ -1583,7 +1458,7 @@ exports[`getServerSideProps Homepage 1`] = `
1583
1458
  }
1584
1459
 
1585
1460
  @media screen and (min-width: 768px) and (max-width: 1439px) {
1586
- .emotion-68 {
1461
+ .emotion-154 {
1587
1462
  font-family: "Bitter",serif;
1588
1463
  font-size: 22px;
1589
1464
  line-height: 24.75px;
@@ -1592,13 +1467,13 @@ exports[`getServerSideProps Homepage 1`] = `
1592
1467
  padding: 0.5px 0px;
1593
1468
  }
1594
1469
 
1595
- .emotion-68::before {
1470
+ .emotion-154::before {
1596
1471
  content: '';
1597
1472
  margin-bottom: -0.2055em;
1598
1473
  display: block;
1599
1474
  }
1600
1475
 
1601
- .emotion-68::after {
1476
+ .emotion-154::after {
1602
1477
  content: '';
1603
1478
  margin-top: -0.2275em;
1604
1479
  display: block;
@@ -1606,7 +1481,7 @@ exports[`getServerSideProps Homepage 1`] = `
1606
1481
  }
1607
1482
 
1608
1483
  @media screen and (min-width: 1440px) {
1609
- .emotion-68 {
1484
+ .emotion-154 {
1610
1485
  font-family: "Bitter",serif;
1611
1486
  font-size: 24px;
1612
1487
  line-height: 27px;
@@ -1615,34 +1490,34 @@ exports[`getServerSideProps Homepage 1`] = `
1615
1490
  padding: 0.5px 0px;
1616
1491
  }
1617
1492
 
1618
- .emotion-68::before {
1493
+ .emotion-154::before {
1619
1494
  content: '';
1620
1495
  margin-bottom: -0.2055em;
1621
1496
  display: block;
1622
1497
  }
1623
1498
 
1624
- .emotion-68::after {
1499
+ .emotion-154::after {
1625
1500
  content: '';
1626
1501
  margin-top: -0.2275em;
1627
1502
  display: block;
1628
1503
  }
1629
1504
  }
1630
1505
 
1631
- .emotion-69 {
1506
+ .emotion-156 {
1632
1507
  margin-bottom: 12px;
1633
1508
  }
1634
1509
 
1635
- .emotion-70 {
1510
+ .emotion-157 {
1636
1511
  margin: 0;
1637
1512
  color: #0A0A0A;
1638
1513
  }
1639
1514
 
1640
- .emotion-70 svg {
1515
+ .emotion-157 svg {
1641
1516
  fill: #0A0A0A;
1642
1517
  }
1643
1518
 
1644
1519
  @media screen and (max-width: 767px) {
1645
- .emotion-70 {
1520
+ .emotion-157 {
1646
1521
  font-family: "DM Sans",sans-serif;
1647
1522
  font-size: 14px;
1648
1523
  line-height: 21px;
@@ -1651,13 +1526,13 @@ exports[`getServerSideProps Homepage 1`] = `
1651
1526
  padding: 0.5px 0px;
1652
1527
  }
1653
1528
 
1654
- .emotion-70::before {
1529
+ .emotion-157::before {
1655
1530
  content: '';
1656
1531
  margin-bottom: -0.391em;
1657
1532
  display: block;
1658
1533
  }
1659
1534
 
1660
- .emotion-70::after {
1535
+ .emotion-157::after {
1661
1536
  content: '';
1662
1537
  margin-top: -0.409em;
1663
1538
  display: block;
@@ -1665,7 +1540,7 @@ exports[`getServerSideProps Homepage 1`] = `
1665
1540
  }
1666
1541
 
1667
1542
  @media screen and (min-width: 768px) {
1668
- .emotion-70 {
1543
+ .emotion-157 {
1669
1544
  font-family: "DM Sans",sans-serif;
1670
1545
  font-size: 16px;
1671
1546
  line-height: 24px;
@@ -1674,103 +1549,19 @@ exports[`getServerSideProps Homepage 1`] = `
1674
1549
  padding: 0.5px 0px;
1675
1550
  }
1676
1551
 
1677
- .emotion-70::before {
1552
+ .emotion-157::before {
1678
1553
  content: '';
1679
1554
  margin-bottom: -0.391em;
1680
1555
  display: block;
1681
1556
  }
1682
1557
 
1683
- .emotion-70::after {
1558
+ .emotion-157::after {
1684
1559
  content: '';
1685
1560
  margin-top: -0.409em;
1686
1561
  display: block;
1687
1562
  }
1688
1563
  }
1689
1564
 
1690
- .emotion-109 {
1691
- border-style: solid;
1692
- border-color: #DEDEDE;
1693
- border-width: 1px;
1694
- border-width: 0px;
1695
- margin: 0;
1696
- border-top-width: 1px;
1697
- width: 100%;
1698
- background: transparent;
1699
- border-color: transparent;
1700
- }
1701
-
1702
- .emotion-111 {
1703
- display: inline-block;
1704
- transition-property: color;
1705
- transition-duration: 200ms;
1706
- transition-timing-function: cubic-bezier(0, 0, .5, 1);
1707
- color: #3358CC;
1708
- -webkit-text-decoration: none;
1709
- text-decoration: none;
1710
- }
1711
-
1712
- .emotion-111 svg {
1713
- fill: #3358CC;
1714
- }
1715
-
1716
- .emotion-111:hover:not(:disabled) {
1717
- color: #2B4AAB;
1718
- -webkit-text-decoration: underline;
1719
- text-decoration: underline;
1720
- }
1721
-
1722
- .emotion-111:hover:not(:disabled) svg {
1723
- fill: #2B4AAB;
1724
- }
1725
-
1726
- .emotion-111:active:not(:disabled) {
1727
- color: #213A82;
1728
- -webkit-text-decoration: underline;
1729
- text-decoration: underline;
1730
- }
1731
-
1732
- .emotion-111:active:not(:disabled) svg {
1733
- fill: #213A82;
1734
- }
1735
-
1736
- .emotion-112 {
1737
- display: -webkit-box;
1738
- display: -webkit-flex;
1739
- display: -ms-flexbox;
1740
- display: flex;
1741
- height: 100%;
1742
- -webkit-align-items: center;
1743
- -webkit-box-align: center;
1744
- -ms-flex-align: center;
1745
- align-items: center;
1746
- -webkit-flex-direction: row;
1747
- -ms-flex-direction: row;
1748
- flex-direction: row;
1749
- -webkit-box-pack: start;
1750
- -ms-flex-pack: start;
1751
- -webkit-justify-content: flex-start;
1752
- justify-content: flex-start;
1753
- }
1754
-
1755
- .emotion-133 {
1756
- position: relative;
1757
- width: 100%;
1758
- display: block;
1759
- padding-top: 56%;
1760
- height: 0;
1761
- width: 100%;
1762
- border-radius: 0;
1763
- background-color: #F4F4F4;
1764
- }
1765
-
1766
- .emotion-133 svg {
1767
- fill: #C0C0C0;
1768
- }
1769
-
1770
- .emotion-164 {
1771
- background:color: #F4F4F4;
1772
- }
1773
-
1774
1565
  <div
1775
1566
  class="emotion-0"
1776
1567
  >
@@ -1789,32 +1580,32 @@ exports[`getServerSideProps Homepage 1`] = `
1789
1580
  class="emotion-4"
1790
1581
  />
1791
1582
  <div
1792
- class="emotion-1"
1583
+ class="emotion-5"
1584
+ data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
1793
1585
  >
1794
1586
  <div
1795
1587
  class="emotion-6"
1796
- data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
1588
+ data-testid="featureVerticalCell"
1797
1589
  >
1798
1590
  <div
1799
1591
  class="emotion-7"
1800
- data-testid="featureVerticalCell"
1801
1592
  >
1802
1593
  <div
1803
1594
  class="emotion-8"
1804
1595
  >
1805
- <div
1596
+ <picture
1806
1597
  class="emotion-9"
1807
1598
  >
1808
- <picture
1599
+ <img
1600
+ alt=""
1809
1601
  class="emotion-10"
1810
- >
1811
- <img
1812
- alt=""
1813
- class="emotion-11"
1814
- src=""
1815
- />
1816
- </picture>
1817
- </div>
1602
+ src=""
1603
+ />
1604
+ </picture>
1605
+ </div>
1606
+ <div
1607
+ class="emotion-11"
1608
+ >
1818
1609
  <div
1819
1610
  class="emotion-12"
1820
1611
  >
@@ -1825,117 +1616,115 @@ exports[`getServerSideProps Homepage 1`] = `
1825
1616
  class="nk-card-link emotion-14"
1826
1617
  href="catagory-one/demo-1/test-headline"
1827
1618
  >
1828
- <div
1619
+ <section
1829
1620
  class="emotion-15"
1830
1621
  >
1831
1622
  <h3
1832
- class="emotion-16"
1623
+ class="nk-headline-heading emotion-16"
1833
1624
  >
1834
1625
  test headline
1835
1626
  </h3>
1836
- </div>
1627
+ </section>
1837
1628
  </a>
1838
1629
  </div>
1839
1630
  </div>
1840
1631
  </div>
1841
1632
  </div>
1633
+ </div>
1634
+ <div
1635
+ class="emotion-17"
1636
+ >
1842
1637
  <div
1843
- class="emotion-17"
1844
- data-testid="titleTeaserVerticalsCell"
1638
+ class="emotion-6"
1639
+ data-testid="titleVerticalCell-0"
1845
1640
  >
1846
1641
  <div
1847
- class="emotion-1"
1642
+ class="emotion-19"
1848
1643
  >
1849
1644
  <div
1850
- class="emotion-19"
1851
- data-testid="SUPPLEMENT_LEAD_AND_4_STACK-InnerGrid"
1645
+ class="emotion-20"
1646
+ >
1647
+ <picture
1648
+ class="emotion-9"
1649
+ >
1650
+ <img
1651
+ alt=""
1652
+ class="emotion-10"
1653
+ src=""
1654
+ />
1655
+ </picture>
1656
+ </div>
1657
+ <div
1658
+ class="emotion-23"
1852
1659
  >
1853
1660
  <div
1854
- class="emotion-20"
1855
- data-testid="titleVerticalCell-1"
1661
+ class="emotion-24"
1856
1662
  >
1857
1663
  <div
1858
- class="emotion-8"
1664
+ class="emotion-25"
1859
1665
  >
1860
- <div
1861
- class="emotion-22"
1666
+ <a
1667
+ class="nk-card-link emotion-14"
1668
+ href="catagory-two/demo-2/test-headline-2"
1862
1669
  >
1863
- <picture
1864
- class="emotion-10"
1670
+ <section
1671
+ class="emotion-27"
1865
1672
  >
1866
- <img
1867
- alt=""
1868
- class="emotion-11"
1869
- src=""
1870
- />
1871
- </picture>
1872
- </div>
1873
- <div
1874
- class="emotion-12"
1875
- >
1876
- <div
1877
- class="emotion-13"
1878
- >
1879
- <a
1880
- class="nk-card-link emotion-14"
1881
- href="catagory-two/demo-2/test-headline-2"
1673
+ <h3
1674
+ class="nk-headline-heading emotion-16"
1882
1675
  >
1883
- <div
1884
- class="emotion-28"
1885
- >
1886
- <h3
1887
- class="emotion-29"
1888
- >
1889
- test headline 2
1890
- </h3>
1891
- </div>
1892
- </a>
1893
- </div>
1894
- </div>
1676
+ test headline 2
1677
+ </h3>
1678
+ </section>
1679
+ </a>
1895
1680
  </div>
1896
1681
  </div>
1682
+ </div>
1683
+ </div>
1684
+ </div>
1685
+ <div
1686
+ class="emotion-6"
1687
+ data-testid="titleVerticalCell-1"
1688
+ >
1689
+ <div
1690
+ class="emotion-19"
1691
+ >
1692
+ <div
1693
+ class="emotion-20"
1694
+ >
1695
+ <picture
1696
+ class="emotion-9"
1697
+ >
1698
+ <img
1699
+ alt=""
1700
+ class="emotion-10"
1701
+ src=""
1702
+ />
1703
+ </picture>
1704
+ </div>
1705
+ <div
1706
+ class="emotion-23"
1707
+ >
1897
1708
  <div
1898
- class="emotion-20"
1899
- data-testid="titleVerticalCell-2"
1709
+ class="emotion-24"
1900
1710
  >
1901
1711
  <div
1902
- class="emotion-8"
1712
+ class="emotion-25"
1903
1713
  >
1904
- <div
1905
- class="emotion-22"
1906
- >
1907
- <picture
1908
- class="emotion-10"
1909
- >
1910
- <img
1911
- alt=""
1912
- class="emotion-11"
1913
- src=""
1914
- />
1915
- </picture>
1916
- </div>
1917
- <div
1918
- class="emotion-12"
1714
+ <a
1715
+ class="nk-card-link emotion-14"
1716
+ href="catagory-three/demo-3/test-headline-3"
1919
1717
  >
1920
- <div
1921
- class="emotion-13"
1718
+ <section
1719
+ class="emotion-27"
1922
1720
  >
1923
- <a
1924
- class="nk-card-link emotion-14"
1925
- href="catagory-three/demo-3/test-headline-3"
1721
+ <h3
1722
+ class="nk-headline-heading emotion-16"
1926
1723
  >
1927
- <div
1928
- class="emotion-28"
1929
- >
1930
- <h3
1931
- class="emotion-29"
1932
- >
1933
- test headline 3
1934
- </h3>
1935
- </div>
1936
- </a>
1937
- </div>
1938
- </div>
1724
+ test headline 3
1725
+ </h3>
1726
+ </section>
1727
+ </a>
1939
1728
  </div>
1940
1729
  </div>
1941
1730
  </div>
@@ -1948,308 +1737,209 @@ exports[`getServerSideProps Homepage 1`] = `
1948
1737
  />
1949
1738
  <div
1950
1739
  class="emotion-41"
1740
+ data-testid="SECONDARY_4-Grid"
1951
1741
  >
1952
1742
  <div
1953
- class="emotion-42"
1954
- data-testid="SectionTitleBar"
1743
+ class="emotion-6"
1744
+ data-testid="titleTeaserVertical-0"
1955
1745
  >
1956
1746
  <div
1957
- class="emotion-43"
1747
+ class="emotion-19"
1958
1748
  >
1959
1749
  <div
1960
- class="emotion-44"
1750
+ class="emotion-20"
1961
1751
  >
1962
- <section
1752
+ <picture
1963
1753
  class="emotion-45"
1964
1754
  >
1965
- <h3
1966
- class="nk-headline-heading emotion-46"
1755
+ <div
1756
+ class="emotion-46"
1757
+ />
1758
+ <img
1759
+ alt="image alt"
1760
+ class="emotion-47"
1761
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1967
1762
  />
1968
- </section>
1763
+ </picture>
1969
1764
  </div>
1970
1765
  <div
1971
- class="emotion-47"
1766
+ class="emotion-23"
1972
1767
  >
1973
- <a
1974
- class="emotion-48"
1975
- href="/section-one"
1768
+ <div
1769
+ class="emotion-24"
1976
1770
  >
1977
- <span
1978
- class="emotion-49"
1771
+ <div
1772
+ class="emotion-25"
1979
1773
  >
1980
- <span
1981
- class="emotion-50"
1774
+ <a
1775
+ class="nk-card-link emotion-14"
1776
+ href="catagory-one/demo-1/test-headline"
1982
1777
  >
1983
- <span
1984
- class="emotion-51"
1778
+ <section
1779
+ class="emotion-27"
1985
1780
  >
1986
- Link
1987
- </span>
1988
- </span>
1989
- <span
1990
- class="emotion-50"
1781
+ <h3
1782
+ class="nk-headline-heading emotion-16"
1783
+ >
1784
+ test headline
1785
+ </h3>
1786
+ </section>
1787
+ </a>
1788
+ </div>
1789
+ </div>
1790
+ </div>
1791
+ </div>
1792
+ </div>
1793
+ <div
1794
+ class="emotion-6"
1795
+ data-testid="titleTeaserVertical-1"
1796
+ >
1797
+ <div
1798
+ class="emotion-19"
1799
+ >
1800
+ <div
1801
+ class="emotion-20"
1802
+ >
1803
+ <picture
1804
+ class="emotion-45"
1805
+ >
1806
+ <div
1807
+ class="emotion-46"
1808
+ />
1809
+ <img
1810
+ alt="image alt 2"
1811
+ class="emotion-47"
1812
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1813
+ />
1814
+ </picture>
1815
+ </div>
1816
+ <div
1817
+ class="emotion-23"
1818
+ >
1819
+ <div
1820
+ class="emotion-24"
1821
+ >
1822
+ <div
1823
+ class="emotion-25"
1824
+ >
1825
+ <a
1826
+ class="nk-card-link emotion-14"
1827
+ href="catagory-two/demo-2/test-headline-2"
1991
1828
  >
1992
- <svg
1993
- aria-hidden="true"
1994
- class="emotion-53 emotion-54"
1995
- fill="currentColor"
1996
- focusable="false"
1997
- viewBox="0 0 24 24"
1998
- xmlns="http://www.w3.org/2000/svg"
1829
+ <section
1830
+ class="emotion-27"
1999
1831
  >
2000
- <path
2001
- d="M0 0h24v24H0z"
2002
- fill="none"
2003
- />
2004
- <path
2005
- d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
2006
- />
2007
- </svg>
2008
- </span>
2009
- </span>
2010
- </a>
1832
+ <h3
1833
+ class="nk-headline-heading emotion-16"
1834
+ >
1835
+ test headline 2
1836
+ </h3>
1837
+ </section>
1838
+ </a>
1839
+ </div>
1840
+ </div>
2011
1841
  </div>
2012
1842
  </div>
2013
1843
  </div>
2014
1844
  <div
2015
- class="emotion-4"
1845
+ class="emotion-6"
1846
+ data-testid="titleTeaserVertical-2"
2016
1847
  >
2017
1848
  <div
2018
- class="emotion-1"
1849
+ class="emotion-19"
2019
1850
  >
2020
1851
  <div
2021
- class="emotion-6"
2022
- data-testid="SECONDARY_4-Grid"
1852
+ class="emotion-20"
2023
1853
  >
2024
- <div
2025
- class="emotion-58"
2026
- data-testid="titleTeaserVertical-0"
1854
+ <picture
1855
+ class="emotion-9"
2027
1856
  >
2028
- <div
2029
- class="emotion-8"
2030
- >
2031
- <div
2032
- class="emotion-22"
2033
- >
2034
- <picture
2035
- class="emotion-61"
2036
- >
2037
- <div
2038
- class="emotion-62"
2039
- />
2040
- <img
2041
- alt="image alt"
2042
- class="emotion-63"
2043
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2044
- />
2045
- </picture>
2046
- </div>
2047
- <div
2048
- class="emotion-12"
2049
- >
2050
- <div
2051
- class="emotion-13"
2052
- >
2053
- <a
2054
- class="nk-card-link emotion-14"
2055
- href="catagory-one/demo-1/test-headline"
2056
- >
2057
- <div
2058
- class="emotion-67"
2059
- >
2060
- <h3
2061
- class="emotion-68"
2062
- >
2063
- test headline
2064
- </h3>
2065
- </div>
2066
- <div
2067
- class="emotion-69"
2068
- >
2069
- <p
2070
- class="emotion-70"
2071
- >
2072
- teaser test text
2073
- </p>
2074
- </div>
2075
- </a>
2076
- </div>
2077
- </div>
2078
- </div>
2079
- </div>
1857
+ <img
1858
+ alt=""
1859
+ class="emotion-10"
1860
+ src=""
1861
+ />
1862
+ </picture>
1863
+ </div>
1864
+ <div
1865
+ class="emotion-23"
1866
+ >
2080
1867
  <div
2081
- class="emotion-58"
2082
- data-testid="titleTeaserVertical-1"
1868
+ class="emotion-24"
2083
1869
  >
2084
1870
  <div
2085
- class="emotion-8"
1871
+ class="emotion-25"
2086
1872
  >
2087
- <div
2088
- class="emotion-22"
2089
- >
2090
- <picture
2091
- class="emotion-61"
2092
- >
2093
- <div
2094
- class="emotion-62"
2095
- />
2096
- <img
2097
- alt="image alt 2"
2098
- class="emotion-63"
2099
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2100
- />
2101
- </picture>
2102
- </div>
2103
- <div
2104
- class="emotion-12"
1873
+ <a
1874
+ class="nk-card-link emotion-14"
1875
+ href="catagory-three/demo-3/test-headline-3"
2105
1876
  >
2106
- <div
2107
- class="emotion-13"
1877
+ <section
1878
+ class="emotion-27"
2108
1879
  >
2109
- <a
2110
- class="nk-card-link emotion-14"
2111
- href="catagory-two/demo-2/test-headline-2"
1880
+ <h3
1881
+ class="nk-headline-heading emotion-16"
2112
1882
  >
2113
- <div
2114
- class="emotion-67"
2115
- >
2116
- <h3
2117
- class="emotion-68"
2118
- >
2119
- test headline 2
2120
- </h3>
2121
- </div>
2122
- <div
2123
- class="emotion-69"
2124
- >
2125
- <p
2126
- class="emotion-70"
2127
- >
2128
- teaser test text 2
2129
- </p>
2130
- </div>
2131
- </a>
2132
- </div>
2133
- </div>
1883
+ test headline 3
1884
+ </h3>
1885
+ </section>
1886
+ </a>
2134
1887
  </div>
2135
1888
  </div>
2136
- <div
2137
- class="emotion-58"
2138
- data-testid="titleTeaserVertical-2"
1889
+ </div>
1890
+ </div>
1891
+ </div>
1892
+ <div
1893
+ class="emotion-6"
1894
+ data-testid="titleTeaserVertical-3"
1895
+ >
1896
+ <div
1897
+ class="emotion-19"
1898
+ >
1899
+ <div
1900
+ class="emotion-20"
1901
+ >
1902
+ <picture
1903
+ class="emotion-45"
2139
1904
  >
2140
1905
  <div
2141
- class="emotion-8"
2142
- >
2143
- <div
2144
- class="emotion-22"
2145
- >
2146
- <picture
2147
- class="emotion-10"
2148
- >
2149
- <img
2150
- alt=""
2151
- class="emotion-11"
2152
- src=""
2153
- />
2154
- </picture>
2155
- </div>
2156
- <div
2157
- class="emotion-12"
2158
- >
2159
- <div
2160
- class="emotion-13"
2161
- >
2162
- <a
2163
- class="nk-card-link emotion-14"
2164
- href="catagory-three/demo-3/test-headline-3"
2165
- >
2166
- <div
2167
- class="emotion-67"
2168
- >
2169
- <h3
2170
- class="emotion-68"
2171
- >
2172
- test headline 3
2173
- </h3>
2174
- </div>
2175
- <div
2176
- class="emotion-69"
2177
- >
2178
- <p
2179
- class="emotion-70"
2180
- >
2181
- teaser test text 3
2182
- </p>
2183
- </div>
2184
- </a>
2185
- </div>
2186
- </div>
2187
- </div>
2188
- </div>
1906
+ class="emotion-46"
1907
+ />
1908
+ <img
1909
+ alt="image alt 3"
1910
+ class="emotion-47"
1911
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1912
+ />
1913
+ </picture>
1914
+ </div>
1915
+ <div
1916
+ class="emotion-23"
1917
+ >
2189
1918
  <div
2190
- class="emotion-58"
2191
- data-testid="titleTeaserVertical-3"
1919
+ class="emotion-24"
2192
1920
  >
2193
1921
  <div
2194
- class="emotion-8"
1922
+ class="emotion-25"
2195
1923
  >
2196
- <div
2197
- class="emotion-22"
2198
- >
2199
- <picture
2200
- class="emotion-61"
2201
- >
2202
- <div
2203
- class="emotion-62"
2204
- />
2205
- <img
2206
- alt="image alt 3"
2207
- class="emotion-63"
2208
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2209
- />
2210
- </picture>
2211
- </div>
2212
- <div
2213
- class="emotion-12"
1924
+ <a
1925
+ class="nk-card-link emotion-14"
1926
+ href="catagory-four/demo-4/test-headline-4"
2214
1927
  >
2215
- <div
2216
- class="emotion-13"
1928
+ <section
1929
+ class="emotion-27"
2217
1930
  >
2218
- <a
2219
- class="nk-card-link emotion-14"
2220
- href="catagory-four/demo-4/test-headline-4"
1931
+ <h3
1932
+ class="nk-headline-heading emotion-16"
2221
1933
  >
2222
- <div
2223
- class="emotion-67"
2224
- >
2225
- <h3
2226
- class="emotion-68"
2227
- >
2228
- test headline 4
2229
- </h3>
2230
- </div>
2231
- <div
2232
- class="emotion-69"
2233
- >
2234
- <p
2235
- class="emotion-70"
2236
- >
2237
- teaser test text 4
2238
- </p>
2239
- </div>
2240
- </a>
2241
- </div>
2242
- </div>
1934
+ test headline 4
1935
+ </h3>
1936
+ </section>
1937
+ </a>
2243
1938
  </div>
2244
1939
  </div>
2245
1940
  </div>
2246
1941
  </div>
2247
1942
  </div>
2248
- <hr
2249
- aria-hidden="true"
2250
- class="emotion-109"
2251
- data-testid="divider"
2252
- />
2253
1943
  </div>
2254
1944
  <div
2255
1945
  class="emotion-4"
@@ -2262,14 +1952,14 @@ exports[`getServerSideProps Homepage 1`] = `
2262
1952
  </h2>
2263
1953
  <p>
2264
1954
  <a
2265
- class="emotion-111"
1955
+ class="emotion-90"
2266
1956
  href="/catagory-one/demo-1/test-headline"
2267
1957
  >
2268
1958
  <span
2269
- class="emotion-112"
1959
+ class="emotion-91"
2270
1960
  >
2271
1961
  <span
2272
- class="emotion-51"
1962
+ class="emotion-92"
2273
1963
  >
2274
1964
  test headline
2275
1965
  </span>
@@ -2278,14 +1968,14 @@ exports[`getServerSideProps Homepage 1`] = `
2278
1968
  </p>
2279
1969
  <p>
2280
1970
  <a
2281
- class="emotion-111"
1971
+ class="emotion-90"
2282
1972
  href="/catagory-two/demo-2/test-headline-2"
2283
1973
  >
2284
1974
  <span
2285
- class="emotion-112"
1975
+ class="emotion-91"
2286
1976
  >
2287
1977
  <span
2288
- class="emotion-51"
1978
+ class="emotion-92"
2289
1979
  >
2290
1980
  test headline 2
2291
1981
  </span>
@@ -2304,14 +1994,14 @@ exports[`getServerSideProps Homepage 1`] = `
2304
1994
  </h2>
2305
1995
  <p>
2306
1996
  <a
2307
- class="emotion-111"
1997
+ class="emotion-90"
2308
1998
  href="/uncategorized"
2309
1999
  >
2310
2000
  <span
2311
- class="emotion-112"
2001
+ class="emotion-91"
2312
2002
  >
2313
2003
  <span
2314
- class="emotion-51"
2004
+ class="emotion-92"
2315
2005
  >
2316
2006
  TODO - External Reference
2317
2007
  </span>
@@ -2320,14 +2010,14 @@ exports[`getServerSideProps Homepage 1`] = `
2320
2010
  </p>
2321
2011
  <p>
2322
2012
  <a
2323
- class="emotion-111"
2013
+ class="emotion-90"
2324
2014
  href="/uncategorized"
2325
2015
  >
2326
2016
  <span
2327
- class="emotion-112"
2017
+ class="emotion-91"
2328
2018
  >
2329
2019
  <span
2330
- class="emotion-51"
2020
+ class="emotion-92"
2331
2021
  >
2332
2022
  TODO - Video
2333
2023
  </span>
@@ -2336,14 +2026,14 @@ exports[`getServerSideProps Homepage 1`] = `
2336
2026
  </p>
2337
2027
  <p>
2338
2028
  <a
2339
- class="emotion-111"
2029
+ class="emotion-90"
2340
2030
  href="/uncategorized"
2341
2031
  >
2342
2032
  <span
2343
- class="emotion-112"
2033
+ class="emotion-91"
2344
2034
  >
2345
2035
  <span
2346
- class="emotion-51"
2036
+ class="emotion-92"
2347
2037
  >
2348
2038
  Unknown slice block - something
2349
2039
  </span>
@@ -2355,144 +2045,142 @@ exports[`getServerSideProps Homepage 1`] = `
2355
2045
  class="emotion-4"
2356
2046
  />
2357
2047
  <div
2358
- class="emotion-1"
2048
+ class="emotion-5"
2049
+ data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
2359
2050
  >
2360
2051
  <div
2361
2052
  class="emotion-6"
2362
- data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
2053
+ data-testid="featureVerticalCell"
2363
2054
  >
2364
2055
  <div
2365
2056
  class="emotion-7"
2366
- data-testid="featureVerticalCell"
2367
2057
  >
2368
2058
  <div
2369
2059
  class="emotion-8"
2370
2060
  >
2371
- <div
2372
- class="emotion-9"
2061
+ <picture
2062
+ class="emotion-111"
2373
2063
  >
2374
- <picture
2375
- class="emotion-133"
2376
- >
2377
- <div
2378
- class="emotion-62"
2379
- />
2380
- <img
2381
- class="emotion-63"
2382
- src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
2383
- />
2384
- </picture>
2385
- </div>
2064
+ <div
2065
+ class="emotion-46"
2066
+ />
2067
+ <img
2068
+ class="emotion-47"
2069
+ src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
2070
+ />
2071
+ </picture>
2072
+ </div>
2073
+ <div
2074
+ class="emotion-11"
2075
+ >
2386
2076
  <div
2387
2077
  class="emotion-12"
2388
2078
  >
2389
2079
  <div
2390
2080
  class="emotion-13"
2391
2081
  >
2392
- <div
2082
+ <section
2393
2083
  class="emotion-15"
2394
2084
  >
2395
2085
  <h3
2396
- class="emotion-16"
2086
+ class="nk-headline-heading emotion-118"
2397
2087
  >
2398
2088
  TODO - External Reference
2399
2089
  </h3>
2400
- </div>
2090
+ </section>
2401
2091
  </div>
2402
2092
  </div>
2403
2093
  </div>
2404
2094
  </div>
2095
+ </div>
2096
+ <div
2097
+ class="emotion-17"
2098
+ >
2405
2099
  <div
2406
- class="emotion-17"
2407
- data-testid="titleTeaserVerticalsCell"
2100
+ class="emotion-6"
2101
+ data-testid="titleVerticalCell-0"
2408
2102
  >
2409
2103
  <div
2410
- class="emotion-1"
2104
+ class="emotion-19"
2411
2105
  >
2412
2106
  <div
2413
- class="emotion-19"
2414
- data-testid="SUPPLEMENT_LEAD_AND_4_STACK-InnerGrid"
2107
+ class="emotion-20"
2108
+ >
2109
+ <picture
2110
+ class="emotion-123"
2111
+ >
2112
+ <div
2113
+ class="emotion-46"
2114
+ />
2115
+ <img
2116
+ class="emotion-47"
2117
+ src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
2118
+ />
2119
+ </picture>
2120
+ </div>
2121
+ <div
2122
+ class="emotion-23"
2415
2123
  >
2416
2124
  <div
2417
- class="emotion-20"
2418
- data-testid="titleVerticalCell-1"
2125
+ class="emotion-24"
2419
2126
  >
2420
2127
  <div
2421
- class="emotion-8"
2128
+ class="emotion-25"
2422
2129
  >
2423
- <div
2424
- class="emotion-22"
2425
- >
2426
- <picture
2427
- class="emotion-133"
2428
- >
2429
- <div
2430
- class="emotion-62"
2431
- />
2432
- <img
2433
- class="emotion-63"
2434
- src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
2435
- />
2436
- </picture>
2437
- </div>
2438
- <div
2439
- class="emotion-12"
2130
+ <section
2131
+ class="emotion-27"
2440
2132
  >
2441
- <div
2442
- class="emotion-13"
2133
+ <h3
2134
+ class="nk-headline-heading emotion-118"
2443
2135
  >
2444
- <div
2445
- class="emotion-28"
2446
- >
2447
- <h3
2448
- class="emotion-29"
2449
- >
2450
- TODO - Video
2451
- </h3>
2452
- </div>
2453
- </div>
2454
- </div>
2136
+ TODO - Video
2137
+ </h3>
2138
+ </section>
2455
2139
  </div>
2456
2140
  </div>
2141
+ </div>
2142
+ </div>
2143
+ </div>
2144
+ <div
2145
+ class="emotion-6"
2146
+ data-testid="titleVerticalCell-1"
2147
+ >
2148
+ <div
2149
+ class="emotion-19"
2150
+ >
2151
+ <div
2152
+ class="emotion-20"
2153
+ >
2154
+ <picture
2155
+ class="emotion-123"
2156
+ >
2157
+ <div
2158
+ class="emotion-46"
2159
+ />
2160
+ <img
2161
+ class="emotion-47"
2162
+ src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
2163
+ />
2164
+ </picture>
2165
+ </div>
2166
+ <div
2167
+ class="emotion-23"
2168
+ >
2457
2169
  <div
2458
- class="emotion-20"
2459
- data-testid="titleVerticalCell-2"
2170
+ class="emotion-24"
2460
2171
  >
2461
2172
  <div
2462
- class="emotion-8"
2173
+ class="emotion-25"
2463
2174
  >
2464
- <div
2465
- class="emotion-22"
2175
+ <section
2176
+ class="emotion-27"
2466
2177
  >
2467
- <picture
2468
- class="emotion-133"
2469
- >
2470
- <div
2471
- class="emotion-62"
2472
- />
2473
- <img
2474
- class="emotion-63"
2475
- src="https://plchldr.co/i/802x451?bg=F0F0F0&fc=111111&text=img"
2476
- />
2477
- </picture>
2478
- </div>
2479
- <div
2480
- class="emotion-12"
2481
- >
2482
- <div
2483
- class="emotion-13"
2178
+ <h3
2179
+ class="nk-headline-heading emotion-118"
2484
2180
  >
2485
- <div
2486
- class="emotion-28"
2487
- >
2488
- <h3
2489
- class="emotion-29"
2490
- >
2491
- Unknown slice block - something
2492
- </h3>
2493
- </div>
2494
- </div>
2495
- </div>
2181
+ Unknown slice block - something
2182
+ </h3>
2183
+ </section>
2496
2184
  </div>
2497
2185
  </div>
2498
2186
  </div>
@@ -2504,313 +2192,133 @@ exports[`getServerSideProps Homepage 1`] = `
2504
2192
  class="emotion-4"
2505
2193
  />
2506
2194
  <div
2507
- class="emotion-164"
2195
+ class="emotion-143"
2196
+ data-testid="SECONDARY_2_AND_2-Grid"
2508
2197
  >
2509
2198
  <div
2510
- class="emotion-42"
2511
- data-testid="SectionTitleBar"
2199
+ class="emotion-6"
2200
+ data-testid="titleTeaserVertical-0"
2512
2201
  >
2513
2202
  <div
2514
- class="emotion-43"
2203
+ class="emotion-7"
2515
2204
  >
2516
2205
  <div
2517
- class="emotion-44"
2206
+ class="emotion-146"
2518
2207
  >
2519
- <section
2208
+ <picture
2520
2209
  class="emotion-45"
2521
2210
  >
2522
- <h3
2523
- class="nk-headline-heading emotion-46"
2211
+ <div
2212
+ class="emotion-46"
2524
2213
  />
2525
- </section>
2214
+ <img
2215
+ alt="image alt"
2216
+ class="emotion-47"
2217
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2218
+ />
2219
+ </picture>
2526
2220
  </div>
2527
2221
  <div
2528
- class="emotion-47"
2222
+ class="emotion-11"
2529
2223
  >
2530
- <a
2531
- class="emotion-48"
2532
- href="/section-one"
2224
+ <div
2225
+ class="emotion-12"
2533
2226
  >
2534
- <span
2535
- class="emotion-49"
2227
+ <div
2228
+ class="emotion-152"
2536
2229
  >
2537
- <span
2538
- class="emotion-50"
2230
+ <a
2231
+ class="nk-card-link emotion-14"
2232
+ href="catagory-one/demo-1/test-headline"
2539
2233
  >
2540
- <span
2541
- class="emotion-51"
2234
+ <section
2235
+ class="emotion-154"
2542
2236
  >
2543
- Link
2544
- </span>
2545
- </span>
2546
- <span
2547
- class="emotion-50"
2237
+ <h3
2238
+ class="nk-headline-heading emotion-16"
2239
+ >
2240
+ test headline
2241
+ </h3>
2242
+ </section>
2243
+ </a>
2244
+ </div>
2245
+ <div
2246
+ class="emotion-156"
2247
+ >
2248
+ <p
2249
+ class="emotion-157"
2548
2250
  >
2549
- <svg
2550
- aria-hidden="true"
2551
- class="emotion-53 emotion-54"
2552
- fill="currentColor"
2553
- focusable="false"
2554
- viewBox="0 0 24 24"
2555
- xmlns="http://www.w3.org/2000/svg"
2556
- >
2557
- <path
2558
- d="M0 0h24v24H0z"
2559
- fill="none"
2560
- />
2561
- <path
2562
- d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
2563
- />
2564
- </svg>
2565
- </span>
2566
- </span>
2567
- </a>
2251
+ teaser test text
2252
+ </p>
2253
+ </div>
2254
+ </div>
2568
2255
  </div>
2569
2256
  </div>
2570
2257
  </div>
2571
2258
  <div
2572
- class="emotion-4"
2259
+ class="emotion-6"
2260
+ data-testid="titleTeaserVertical-1"
2573
2261
  >
2574
2262
  <div
2575
- class="emotion-1"
2263
+ class="emotion-7"
2576
2264
  >
2577
2265
  <div
2578
- class="emotion-6"
2579
- data-testid="SECONDARY_4_ODD-Grid"
2266
+ class="emotion-146"
2580
2267
  >
2581
- <div
2582
- class="emotion-58"
2583
- data-testid="titleTeaserVertical-0"
2584
- >
2585
- <div
2586
- class="emotion-8"
2587
- >
2588
- <div
2589
- class="emotion-22"
2590
- >
2591
- <picture
2592
- class="emotion-61"
2593
- >
2594
- <div
2595
- class="emotion-62"
2596
- />
2597
- <img
2598
- alt="image alt"
2599
- class="emotion-63"
2600
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2601
- />
2602
- </picture>
2603
- </div>
2604
- <div
2605
- class="emotion-12"
2606
- >
2607
- <div
2608
- class="emotion-13"
2609
- >
2610
- <a
2611
- class="nk-card-link emotion-14"
2612
- href="catagory-one/demo-1/test-headline"
2613
- >
2614
- <div
2615
- class="emotion-67"
2616
- >
2617
- <h3
2618
- class="emotion-68"
2619
- >
2620
- test headline
2621
- </h3>
2622
- </div>
2623
- <div
2624
- class="emotion-69"
2625
- >
2626
- <p
2627
- class="emotion-70"
2628
- >
2629
- teaser test text
2630
- </p>
2631
- </div>
2632
- </a>
2633
- </div>
2634
- </div>
2635
- </div>
2636
- </div>
2637
- <div
2638
- class="emotion-58"
2639
- data-testid="titleTeaserVertical-1"
2268
+ <picture
2269
+ class="emotion-45"
2640
2270
  >
2641
2271
  <div
2642
- class="emotion-8"
2643
- >
2644
- <div
2645
- class="emotion-22"
2646
- >
2647
- <picture
2648
- class="emotion-61"
2649
- >
2650
- <div
2651
- class="emotion-62"
2652
- />
2653
- <img
2654
- alt="image alt 2"
2655
- class="emotion-63"
2656
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2657
- />
2658
- </picture>
2659
- </div>
2660
- <div
2661
- class="emotion-12"
2662
- >
2663
- <div
2664
- class="emotion-13"
2665
- >
2666
- <a
2667
- class="nk-card-link emotion-14"
2668
- href="catagory-one/demo-2/test-headline-2"
2669
- >
2670
- <div
2671
- class="emotion-67"
2672
- >
2673
- <h3
2674
- class="emotion-68"
2675
- >
2676
- test headline 2
2677
- </h3>
2678
- </div>
2679
- <div
2680
- class="emotion-69"
2681
- >
2682
- <p
2683
- class="emotion-70"
2684
- >
2685
- teaser test text 2
2686
- </p>
2687
- </div>
2688
- </a>
2689
- </div>
2690
- </div>
2691
- </div>
2692
- </div>
2272
+ class="emotion-46"
2273
+ />
2274
+ <img
2275
+ alt="image alt 2"
2276
+ class="emotion-47"
2277
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2278
+ />
2279
+ </picture>
2280
+ </div>
2281
+ <div
2282
+ class="emotion-11"
2283
+ >
2693
2284
  <div
2694
- class="emotion-58"
2695
- data-testid="titleTeaserVertical-2"
2285
+ class="emotion-12"
2696
2286
  >
2697
2287
  <div
2698
- class="emotion-8"
2288
+ class="emotion-152"
2699
2289
  >
2700
- <div
2701
- class="emotion-22"
2702
- >
2703
- <picture
2704
- class="emotion-61"
2705
- >
2706
- <div
2707
- class="emotion-62"
2708
- />
2709
- <img
2710
- alt="image alt 3"
2711
- class="emotion-63"
2712
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2713
- />
2714
- </picture>
2715
- </div>
2716
- <div
2717
- class="emotion-12"
2290
+ <a
2291
+ class="nk-card-link emotion-14"
2292
+ href="catagory-one/demo-2/test-headline-2"
2718
2293
  >
2719
- <div
2720
- class="emotion-13"
2294
+ <section
2295
+ class="emotion-154"
2721
2296
  >
2722
- <a
2723
- class="nk-card-link emotion-14"
2724
- href="catagory-one/demo-3/test-headline-3"
2297
+ <h3
2298
+ class="nk-headline-heading emotion-16"
2725
2299
  >
2726
- <div
2727
- class="emotion-67"
2728
- >
2729
- <h3
2730
- class="emotion-68"
2731
- >
2732
- test headline 3
2733
- </h3>
2734
- </div>
2735
- <div
2736
- class="emotion-69"
2737
- >
2738
- <p
2739
- class="emotion-70"
2740
- >
2741
- teaser test text 3
2742
- </p>
2743
- </div>
2744
- </a>
2745
- </div>
2746
- </div>
2300
+ test headline 2
2301
+ </h3>
2302
+ </section>
2303
+ </a>
2747
2304
  </div>
2748
- </div>
2749
- <div
2750
- class="emotion-58"
2751
- data-testid="titleTeaserVertical-3"
2752
- >
2753
2305
  <div
2754
- class="emotion-8"
2306
+ class="emotion-156"
2755
2307
  >
2756
- <div
2757
- class="emotion-22"
2308
+ <p
2309
+ class="emotion-157"
2758
2310
  >
2759
- <picture
2760
- class="emotion-61"
2761
- >
2762
- <div
2763
- class="emotion-62"
2764
- />
2765
- <img
2766
- alt="image alt 3"
2767
- class="emotion-63"
2768
- src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2769
- />
2770
- </picture>
2771
- </div>
2772
- <div
2773
- class="emotion-12"
2774
- >
2775
- <div
2776
- class="emotion-13"
2777
- >
2778
- <a
2779
- class="nk-card-link emotion-14"
2780
- href="catagory-one/demo-4/test-headline-4"
2781
- >
2782
- <div
2783
- class="emotion-67"
2784
- >
2785
- <h3
2786
- class="emotion-68"
2787
- >
2788
- test headline 4
2789
- </h3>
2790
- </div>
2791
- <div
2792
- class="emotion-69"
2793
- >
2794
- <p
2795
- class="emotion-70"
2796
- >
2797
- teaser test text 4
2798
- </p>
2799
- </div>
2800
- </a>
2801
- </div>
2802
- </div>
2311
+ teaser test text 2
2312
+ </p>
2803
2313
  </div>
2804
2314
  </div>
2805
2315
  </div>
2806
2316
  </div>
2807
2317
  </div>
2808
- <hr
2809
- aria-hidden="true"
2810
- class="emotion-109"
2811
- data-testid="divider"
2812
- />
2813
2318
  </div>
2319
+ <div
2320
+ class="emotion-4"
2321
+ />
2814
2322
  </div>
2815
2323
  </div>
2816
2324
  </div>