@ilo-org/styles 0.5.0 → 0.7.0

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 (45) hide show
  1. package/build/css/components/index.css +805 -1088
  2. package/build/css/components/index.css.map +1 -1
  3. package/build/css/global.css +1 -1
  4. package/build/css/index.css +805 -1088
  5. package/build/css/index.css.map +1 -1
  6. package/build/css/monorepo.css +805 -1088
  7. package/build/css/monorepo.css.map +1 -1
  8. package/build/minified/index.css +1 -1
  9. package/build/minified/index.css.map +1 -1
  10. package/build/minified/monorepo.css +1 -1
  11. package/build/minified/monorepo.css.map +1 -1
  12. package/css/components/accordion.css +1 -1
  13. package/css/components/card.css +1 -1
  14. package/css/components/cardgroup.css +1 -1
  15. package/css/components/datacard.css +1 -0
  16. package/css/components/detailcard.css +1 -0
  17. package/css/components/factlistcard.css +1 -0
  18. package/css/components/featurecard.css +1 -0
  19. package/css/components/herocard.css +1 -1
  20. package/css/components/logogrid.css +1 -0
  21. package/css/components/multilinkcard.css +1 -0
  22. package/css/components/promocard.css +1 -0
  23. package/css/components/statcard.css +1 -0
  24. package/css/components/textcard.css +1 -0
  25. package/css/global.css.map +1 -1
  26. package/css/index.css +1 -1
  27. package/css/index.css.map +1 -1
  28. package/css/monorepo.css +1 -1
  29. package/css/monorepo.css.map +1 -1
  30. package/package.json +1 -1
  31. package/scss/_mixins.scss +19 -20
  32. package/scss/components/_accordion.scss +8 -0
  33. package/scss/components/_card.scss +79 -1377
  34. package/scss/components/_cardgroup.scss +26 -26
  35. package/scss/components/_datacard.scss +90 -0
  36. package/scss/components/_detailcard.scss +150 -0
  37. package/scss/components/_factlistcard.scss +110 -0
  38. package/scss/components/_featurecard.scss +218 -0
  39. package/scss/components/_herocard.scss +3 -19
  40. package/scss/components/_logogrid.scss +52 -0
  41. package/scss/components/_multilinkcard.scss +189 -0
  42. package/scss/components/_promocard.scss +157 -0
  43. package/scss/components/_statcard.scss +76 -0
  44. package/scss/components/_textcard.scss +135 -0
  45. package/scss/components/index.scss +9 -0
package/build/css/index.css CHANGED
@@ -151,7 +151,7 @@ select {
151
151
  }
152
152
  /**
153
153
  * Do not edit directly
154
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
154
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
155
155
  */
156
156
  /**
157
157
  * TOKENS:
@@ -169,7 +169,7 @@ body {
169
169
 
170
170
  /**
171
171
  * Do not edit directly
172
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
172
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
173
173
  */
174
174
  /**
175
175
  * TOKENS:
@@ -245,6 +245,7 @@ body {
245
245
  --height: auto;
246
246
  color: rgb(109, 109, 109);
247
247
  font-family: Noto Sans;
248
+ position: relative;
248
249
  height: 0px;
249
250
  overflow: hidden;
250
251
  transition: height 225ms ease-out, padding 225ms ease-out;
@@ -260,6 +261,11 @@ body {
260
261
  height: var(--height);
261
262
  transition: height 225ms ease-out, padding 225ms ease-out;
262
263
  }
264
+ .ilo--accordion--panel__scroll {
265
+ max-height: 500px;
266
+ overflow-y: auto;
267
+ padding-right: 1.7148981779rem;
268
+ }
263
269
  .ilo--accordion--panel.collapsing, .ilo--accordion--panel.expanding {
264
270
  height: 0;
265
271
  position: relative;
@@ -282,7 +288,7 @@ body {
282
288
 
283
289
  /**
284
290
  * Do not edit directly
285
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
291
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
286
292
  */
287
293
  /**
288
294
  * TOKENS:
@@ -307,7 +313,7 @@ body {
307
313
  }
308
314
  /**
309
315
  * Do not edit directly
310
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
316
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
311
317
  */
312
318
  /**
313
319
  * TOKENS:
@@ -561,7 +567,7 @@ body {
561
567
 
562
568
  /**
563
569
  * Do not edit directly
564
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
570
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
565
571
  */
566
572
  /**
567
573
  * TOKENS:
@@ -571,7 +577,7 @@ body {
571
577
  */
572
578
  /**
573
579
  * Do not edit directly
574
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
580
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
575
581
  */
576
582
  /**
577
583
  * TOKENS:
@@ -596,7 +602,7 @@ body {
596
602
  }
597
603
  /**
598
604
  * Do not edit directly
599
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
605
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
600
606
  */
601
607
  /**
602
608
  * TOKENS:
@@ -886,7 +892,7 @@ body {
886
892
 
887
893
  /**
888
894
  * Do not edit directly
889
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
895
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
890
896
  */
891
897
  /**
892
898
  * TOKENS:
@@ -1016,7 +1022,7 @@ body {
1016
1022
 
1017
1023
  /**
1018
1024
  * Do not edit directly
1019
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
1025
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1020
1026
  */
1021
1027
  /**
1022
1028
  * TOKENS:
@@ -1025,38 +1031,75 @@ body {
1025
1031
  * MAPS:
1026
1032
  */
1027
1033
  .ilo--card {
1028
- margin: 0;
1029
- max-width: 49.3033226152rem;
1034
+ box-sizing: border-box;
1035
+ position: relative;
1036
+ max-width: var(--max-width);
1037
+ flex: 1 1 var(--max-width);
1038
+ }
1039
+ .ilo--card__size__fluid {
1040
+ --max-width: 100% !important;
1030
1041
  }
1031
1042
  .right-to-left .ilo--card {
1032
1043
  text-align: right;
1033
1044
  }
1034
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat), .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat), .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) {
1045
+ .ilo--card__action:hover, .ilo--card__action:focus, .ilo--card__action:focus-within {
1035
1046
  background: rgb(255, 255, 255);
1036
- color: rgb(30, 45, 190);
1037
1047
  outline: none;
1038
1048
  text-decoration: none;
1039
1049
  }
1040
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist) {
1050
+ .ilo--card__action:hover.ilo--card__dark, .ilo--card__action:focus.ilo--card__dark, .ilo--card__action:focus-within.ilo--card__dark {
1041
1051
  background: rgb(255, 255, 255);
1042
1052
  }
1043
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist).ilo--card--cornercut::after, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist).ilo--card--cornercut::after, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist).ilo--card--cornercut::after {
1044
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1045
- }
1046
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow {
1053
+ .ilo--card__action:hover .ilo--card--eyebrow,
1054
+ .ilo--card__action:hover .ilo--card--title,
1055
+ .ilo--card__action:hover .ilo--card--intro,
1056
+ .ilo--card__action:hover .ilo--card--date,
1057
+ .ilo--card__action:hover .ilo--card--date-extra, .ilo--card__action:focus .ilo--card--eyebrow,
1058
+ .ilo--card__action:focus .ilo--card--title,
1059
+ .ilo--card__action:focus .ilo--card--intro,
1060
+ .ilo--card__action:focus .ilo--card--date,
1061
+ .ilo--card__action:focus .ilo--card--date-extra, .ilo--card__action:focus-within .ilo--card--eyebrow,
1062
+ .ilo--card__action:focus-within .ilo--card--title,
1063
+ .ilo--card__action:focus-within .ilo--card--intro,
1064
+ .ilo--card__action:focus-within .ilo--card--date,
1065
+ .ilo--card__action:focus-within .ilo--card--date-extra {
1047
1066
  color: rgb(30, 45, 190);
1048
1067
  }
1049
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--title, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--title, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--title {
1050
- color: rgb(30, 45, 190);
1068
+ .ilo--card__theme__light {
1069
+ background: rgb(255, 255, 255);
1051
1070
  }
1052
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--intro, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--intro, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--intro {
1053
- color: rgb(30, 45, 190);
1071
+ .ilo--card__theme__dark {
1072
+ background: rgb(35, 0, 80);
1073
+ transition: background 150ms ease-out;
1054
1074
  }
1055
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--date, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--date, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--date {
1056
- color: rgb(30, 45, 190);
1075
+ .ilo--card__theme__dark .ilo--card--eyebrow,
1076
+ .ilo--card__theme__dark .ilo--card--title,
1077
+ .ilo--card__theme__dark .ilo--card--intro,
1078
+ .ilo--card__theme__dark .ilo--card--date,
1079
+ .ilo--card__theme__dark .ilo--card--eventdate {
1080
+ color: rgb(237, 240, 242);
1081
+ transition: color 150ms ease-out;
1057
1082
  }
1058
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eventdate, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eventdate, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eventdate {
1059
- color: rgb(30, 45, 190);
1083
+ .ilo--card__isvideo .ilo--card--image--wrapper {
1084
+ position: relative;
1085
+ }
1086
+ .ilo--card__isvideo .ilo--card--image--wrapper::before {
1087
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(237, 240, 242)' d='M22 11.9999L4 2V22L22 11.9999Z'/%3e%3c/svg%3e");
1088
+ background-color: rgb(45, 45, 45);
1089
+ background-position: center;
1090
+ background-size: 18px 20px;
1091
+ background-repeat: no-repeat;
1092
+ content: "";
1093
+ display: block;
1094
+ height: 40px;
1095
+ left: 0;
1096
+ position: absolute;
1097
+ top: 0;
1098
+ width: 40px;
1099
+ z-index: 1;
1100
+ }
1101
+ .ilo--card--wrapper:hover, .ilo--card--wrapper:focus, .ilo--card--wrapper:focus-within {
1102
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1060
1103
  }
1061
1104
  .ilo--card--link {
1062
1105
  background: none;
@@ -1078,6 +1121,21 @@ body {
1078
1121
  transition-duration: 150ms;
1079
1122
  transition-timing-function: ease-out;
1080
1123
  }
1124
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--eyebrow, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--eyebrow, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--eyebrow {
1125
+ color: rgb(30, 45, 190);
1126
+ }
1127
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--title, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--title, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--title {
1128
+ color: rgb(30, 45, 190);
1129
+ }
1130
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--intro, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--intro, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--intro {
1131
+ color: rgb(30, 45, 190);
1132
+ }
1133
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--date, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--date, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--date {
1134
+ color: rgb(30, 45, 190);
1135
+ }
1136
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--eventdate, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--eventdate, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--eventdate {
1137
+ color: rgb(30, 45, 190);
1138
+ }
1081
1139
  .ilo--card--link--text {
1082
1140
  width: 1px;
1083
1141
  height: 1px;
@@ -1088,176 +1146,6 @@ body {
1088
1146
  clip: rect(0 0 0 0);
1089
1147
  overflow: hidden;
1090
1148
  }
1091
- .ilo--card--light {
1092
- background: rgb(255, 255, 255);
1093
- }
1094
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) {
1095
- background: rgb(35, 0, 80);
1096
- outline: none;
1097
- transition: background 150ms ease-out;
1098
- }
1099
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--eyebrow {
1100
- color: rgb(237, 240, 242);
1101
- transition: color 150ms ease-out;
1102
- }
1103
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--title {
1104
- color: rgb(255, 255, 255);
1105
- transition: color 150ms ease-out;
1106
- }
1107
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--intro {
1108
- color: rgb(237, 240, 242);
1109
- transition: color 150ms ease-out;
1110
- }
1111
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--date {
1112
- color: rgb(237, 240, 242);
1113
- transition: color 150ms ease-out;
1114
- }
1115
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) .ilo--card--eventdate {
1116
- color: rgb(237, 240, 242);
1117
- transition: color 150ms ease-out;
1118
- }
1119
- .ilo--card--dark:not(.ilo--card--action), .ilo--card--dark:not(.ilo--card--action):hover, .ilo--card--dark:not(.ilo--card--action):focus, .ilo--card--dark:not(.ilo--card--action):focus-within {
1120
- background: rgb(35, 0, 80);
1121
- outline: none;
1122
- transition: background 150ms ease-out;
1123
- }
1124
- .ilo--card--dark:not(.ilo--card--action) .ilo--card--eyebrow, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--eyebrow, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--eyebrow, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--eyebrow {
1125
- color: rgb(237, 240, 242);
1126
- transition: color 150ms ease-out;
1127
- }
1128
- .ilo--card--dark:not(.ilo--card--action) .ilo--card--title, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--title, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--title, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--title {
1129
- color: rgb(255, 255, 255);
1130
- transition: color 150ms ease-out;
1131
- }
1132
- .ilo--card--dark:not(.ilo--card--action) .ilo--card--intro, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--intro, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--intro, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--intro {
1133
- color: rgb(237, 240, 242);
1134
- transition: color 150ms ease-out;
1135
- }
1136
- .ilo--card--dark:not(.ilo--card--action) .ilo--card--date, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--date, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--date, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--date {
1137
- color: rgb(237, 240, 242);
1138
- transition: color 150ms ease-out;
1139
- }
1140
- .ilo--card--dark:not(.ilo--card--action) .ilo--card--eventdate, .ilo--card--dark:not(.ilo--card--action):hover .ilo--card--eventdate, .ilo--card--dark:not(.ilo--card--action):focus .ilo--card--eventdate, .ilo--card--dark:not(.ilo--card--action):focus-within .ilo--card--eventdate {
1141
- color: rgb(237, 240, 242);
1142
- transition: color 150ms ease-out;
1143
- }
1144
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data) {
1145
- margin-top: 2.1436227224rem;
1146
- padding-top: 0;
1147
- position: relative;
1148
- }
1149
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1150
- background: inherit;
1151
- content: "";
1152
- display: block;
1153
- height: 40px;
1154
- position: absolute;
1155
- width: calc(100% - 73px);
1156
- }
1157
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1158
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1159
- background-position: bottom right;
1160
- background-size: cover;
1161
- content: "";
1162
- height: 40px;
1163
- display: block;
1164
- position: absolute;
1165
- width: 73.4px;
1166
- }
1167
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data).ilo--card--dark::after {
1168
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1169
- }
1170
- @media screen and (min-width: 610px) {
1171
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data) {
1172
- margin-top: 2.5723472669rem;
1173
- }
1174
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1175
- background: inherit;
1176
- content: "";
1177
- display: block;
1178
- height: 48px;
1179
- position: absolute;
1180
- width: calc(100% - 87px);
1181
- }
1182
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1183
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1184
- background-position: bottom right;
1185
- background-size: cover;
1186
- content: "";
1187
- height: 48px;
1188
- display: block;
1189
- position: absolute;
1190
- width: 87.4px;
1191
- }
1192
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data).ilo--card--dark::after {
1193
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1194
- }
1195
- }
1196
- @media screen and (min-width: 1024px) {
1197
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data) {
1198
- margin-top: 3.4297963558rem;
1199
- }
1200
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1201
- background: inherit;
1202
- content: "";
1203
- display: block;
1204
- height: 64px;
1205
- position: absolute;
1206
- width: calc(100% - 116px);
1207
- }
1208
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1209
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1210
- background-position: bottom right;
1211
- background-size: cover;
1212
- content: "";
1213
- height: 64px;
1214
- display: block;
1215
- position: absolute;
1216
- width: 116.4px;
1217
- }
1218
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data).ilo--card--dark::after {
1219
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1220
- }
1221
- }
1222
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1223
- left: 0;
1224
- top: -2.1436227224rem;
1225
- transition: background-image 150ms ease-out;
1226
- }
1227
- .right-to-left .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1228
- left: auto;
1229
- right: 0;
1230
- }
1231
- @media screen and (min-width: 610px) {
1232
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1233
- top: -2.5562700965rem;
1234
- }
1235
- }
1236
- @media screen and (min-width: 1024px) {
1237
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1238
- top: -3.4137191854rem;
1239
- }
1240
- }
1241
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1242
- right: 0;
1243
- top: -2.1436227224rem;
1244
- transition: background-image 150ms ease-out;
1245
- }
1246
- .right-to-left .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1247
- left: 0;
1248
- right: auto;
1249
- transform: rotateY(180deg);
1250
- }
1251
- @media screen and (min-width: 610px) {
1252
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1253
- top: -2.5562700965rem;
1254
- }
1255
- }
1256
- @media screen and (min-width: 1024px) {
1257
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1258
- top: -3.4137191854rem;
1259
- }
1260
- }
1261
1149
  .ilo--card--eyebrow {
1262
1150
  color: rgb(150, 10, 85);
1263
1151
  font-size: 16px;
@@ -1330,7 +1218,7 @@ body {
1330
1218
  line-height: 23.36px;
1331
1219
  margin-bottom: 1.3742266073rem;
1332
1220
  }
1333
- .ilo--card--image {
1221
+ .ilo--card--picture {
1334
1222
  max-width: 100%;
1335
1223
  width: 100%;
1336
1224
  }
@@ -1338,190 +1226,131 @@ body {
1338
1226
  position: relative;
1339
1227
  z-index: 2;
1340
1228
  }
1341
- .ilo--card--isvideo .ilo--card--image--wrapper {
1229
+
1230
+ /**
1231
+ * Do not edit directly
1232
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1233
+ */
1234
+ /**
1235
+ * TOKENS:
1236
+ */
1237
+ /**
1238
+ * MAPS:
1239
+ */
1240
+ .ilo--card__type__feature {
1241
+ --max-width: 22.0793140407rem;
1242
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1243
+ display: flex;
1244
+ margin-top: 0;
1342
1245
  position: relative;
1343
1246
  }
1344
- .ilo--card--isvideo .ilo--card--image--wrapper::before {
1345
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(237, 240, 242)' d='M22 11.9999L4 2V22L22 11.9999Z'/%3e%3c/svg%3e");
1346
- background-color: rgb(45, 45, 45);
1347
- background-position: center;
1348
- background-size: 18px 20px;
1349
- background-repeat: no-repeat;
1350
- content: "";
1351
- display: block;
1352
- height: 40px;
1353
- left: 0;
1354
- position: absolute;
1355
- top: 0;
1356
- width: 40px;
1357
- z-index: 1;
1247
+ .ilo--card__type__feature.ilo--card__theme__dark {
1248
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1358
1249
  }
1359
- .ilo--card--multilink {
1360
- padding: 1.2861736334rem;
1250
+ .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list {
1251
+ border-top: 2px solid rgba(237, 240, 242, 0.25);
1361
1252
  }
1362
- .ilo--card--multilink .ilo--card--image--wrapper {
1363
- display: none;
1253
+ .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list--link {
1254
+ color: rgb(255, 255, 255);
1255
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1364
1256
  }
1365
- .ilo--card--multilink .ilo--card--content .ilo--card--image--wrapper {
1366
- display: block;
1257
+ .ilo--card__type__feature.ilo--card__theme__dark:hover .ilo--link-list--link, .ilo--card__type__feature.ilo--card__theme__dark:focus .ilo--link-list--link, .ilo--card__type__feature.ilo--card__theme__dark:focus-within .ilo--link-list--link {
1258
+ color: rgb(30, 45, 190);
1259
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1367
1260
  }
1368
- @media screen and (min-width: 610px) {
1369
- .ilo--card--multilink {
1370
- padding: 2.1436227224rem;
1371
- }
1261
+ .ilo--card__type__feature picture::before {
1262
+ transition-property: opacity;
1263
+ transition-duration: 150ms;
1264
+ transition-timing-function: ease-out;
1372
1265
  }
1373
- @media screen and (min-width: 1024px) {
1374
- .ilo--card--multilink {
1375
- padding: 3.0010718114rem 2.5723472669rem;
1376
- }
1266
+ .ilo--card__type__feature:hover, .ilo--card__type__feature:focus, .ilo--card__type__feature:focus-within {
1267
+ background-color: rgb(255, 255, 255);
1268
+ border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
1269
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1377
1270
  }
1378
- .ilo--card--multilink .ilo--card--title {
1379
- font-size: 23.32px;
1380
- letter-spacing: -0.035em;
1381
- line-height: 29.15px;
1382
- margin-bottom: 0.7188906752rem;
1383
- color: rgb(45, 45, 45);
1271
+ .ilo--card__type__feature:hover picture::before, .ilo--card__type__feature:focus picture::before, .ilo--card__type__feature:focus-within picture::before {
1272
+ opacity: 0.4;
1273
+ z-index: 1;
1274
+ transition-property: opacity;
1275
+ transition-duration: 150ms;
1276
+ transition-timing-function: ease-out;
1384
1277
  }
1385
- @media screen and (min-width: 610px) {
1386
- .ilo--card--multilink .ilo--card--title {
1387
- font-size: 29.16px;
1388
- letter-spacing: -0.035em;
1389
- line-height: 36.45px;
1390
- margin-bottom: 0.5741425509rem;
1391
- }
1278
+ .ilo--card__type__feature:hover .ilo--card--picture, .ilo--card__type__feature:focus .ilo--card--picture, .ilo--card__type__feature:focus-within .ilo--card--picture {
1279
+ filter: saturate(0);
1392
1280
  }
1393
- .ilo--card--multilink .ilo--card--intro {
1394
- font-size: 16px;
1395
- letter-spacing: normal;
1396
- line-height: 23.36px;
1397
- margin-bottom: 1.910132288rem;
1398
- color: rgb(45, 45, 45);
1281
+ .ilo--card__type__feature .ilo--link-list {
1282
+ border-top: 0.1071811361rem solid rgb(237, 240, 242);
1283
+ margin-left: -1.2861736334rem;
1284
+ margin-right: -1.2861736334rem;
1285
+ margin-top: 1.822079314rem;
1286
+ position: relative;
1287
+ z-index: 2;
1399
1288
  }
1400
- @media screen and (min-width: 610px) {
1401
- .ilo--card--multilink .ilo--card--intro {
1402
- font-size: 18.66px;
1403
- letter-spacing: normal;
1404
- line-height: 27.24px;
1405
- margin-bottom: 1.8685411561rem;
1406
- }
1289
+ .ilo--card__type__feature .ilo--link-list--link, .ilo--card__type__feature .ilo--link-list--link:hover {
1290
+ border-bottom: none;
1291
+ padding-left: 1.2861736334rem;
1292
+ padding-right: 1.2861736334rem;
1407
1293
  }
1408
- .ilo--card--multilink.ilo--card--dark {
1409
- background: rgb(255, 255, 255);
1294
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--wrap {
1295
+ display: flex;
1296
+ flex-wrap: wrap;
1297
+ width: 100%;
1410
1298
  }
1411
- .ilo--card--multilink.ilo--card--dark .ilo--card--title {
1412
- color: rgb(45, 45, 45);
1299
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--content {
1300
+ width: 100%;
1413
1301
  }
1414
- .ilo--card--multilink.ilo--card--dark .ilo--card--intro {
1415
- color: rgb(45, 45, 45);
1302
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--image--wrapper {
1303
+ width: 100%;
1416
1304
  }
1417
- .ilo--card--multilink.ilo--card--wide {
1418
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1305
+ .ilo--card__type__feature.ilo--card__size__wide, .ilo--card__type__feature.ilo--card__size__fluid {
1306
+ --max-width: 40.4072883173rem;
1419
1307
  }
1420
1308
  @media screen and (min-width: 610px) {
1421
- .ilo--card--multilink.ilo--card--wide {
1422
- padding: 3.0010718114rem 2.5723472669rem;
1423
- }
1424
- .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1425
- flex-direction: row-reverse;
1426
- }
1427
- .right-to-left .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1309
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--wrap, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--wrap {
1428
1310
  flex-direction: row;
1429
1311
  }
1430
- .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1431
- display: flex;
1432
- column-gap: 1.7148981779rem;
1433
- }
1434
- .right-to-left .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1312
+ .right-to-left .ilo--card__type__feature.ilo--card__size__wide .ilo--card--wrap, .right-to-left .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--wrap {
1435
1313
  flex-direction: row-reverse;
1436
1314
  }
1437
- .ilo--card--multilink.ilo--card--wide .ilo--card--image--wrapper {
1438
- display: block;
1315
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--content, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--content {
1316
+ display: flex;
1317
+ flex-direction: row;
1318
+ flex-wrap: wrap;
1319
+ position: relative;
1439
1320
  width: 50%;
1440
1321
  }
1441
- .ilo--card--multilink.ilo--card--wide .ilo--card--content {
1322
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image--wrapper {
1442
1323
  width: 50%;
1443
1324
  }
1444
- .ilo--card--multilink.ilo--card--wide .ilo--card--content .ilo--card--image--wrapper {
1445
- display: none;
1325
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--image, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image {
1326
+ object-fit: cover;
1446
1327
  }
1447
- }
1448
- .ilo--card--multilink.ilo--card--standard {
1449
- padding: 2.5723472669rem 2.1436227224rem;
1450
- }
1451
- @media screen and (min-width: 610px) {
1452
- .ilo--card--multilink.ilo--card--standard {
1453
- padding: 2.5723472669rem 2.1436227224rem;
1454
- }
1455
- }
1456
- @media screen and (min-width: 1024px) {
1457
- .ilo--card--multilink.ilo--card--standard {
1458
- padding: 2.5723472669rem 2.1436227224rem;
1459
- }
1460
- }
1461
- .ilo--card--multilink.ilo--card--narrow {
1462
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1463
- }
1464
- @media screen and (min-width: 610px) {
1465
- .ilo--card--multilink.ilo--card--narrow {
1466
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1467
- }
1468
- }
1469
- @media screen and (min-width: 1024px) {
1470
- .ilo--card--multilink.ilo--card--narrow {
1471
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1328
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--date, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--date {
1329
+ align-self: flex-end;
1330
+ width: 100%;
1472
1331
  }
1473
- }
1474
- .ilo--card--multilink.ilo--card--narrow .ilo--card--image--wrapper {
1475
- display: none;
1476
- }
1477
- .ilo--card--multilink.ilo--card--narrow .ilo--card--content .ilo--card--image--wrapper {
1478
- display: block;
1479
- margin-bottom: 1.2861736334rem;
1480
- }
1481
- @media screen and (min-width: 610px) {
1482
- .ilo--card--multilink.ilo--card--narrow .ilo--card--title {
1483
- font-size: 23.32px;
1484
- letter-spacing: -0.035em;
1485
- line-height: 29.15px;
1486
- margin-bottom: 0.7188906752rem;
1332
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--eyebrow, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--eyebrow {
1333
+ width: 100%;
1487
1334
  }
1488
- }
1489
- @media screen and (min-width: 610px) {
1490
- .ilo--card--multilink.ilo--card--narrow .ilo--card--intro {
1491
- font-size: 16px;
1492
- letter-spacing: normal;
1493
- line-height: 23.36px;
1494
- margin-bottom: 1.910132288rem;
1335
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--title, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--title {
1336
+ width: 100%;
1495
1337
  }
1496
- }
1497
- .ilo--card--multilink .ilo--link-list {
1498
- margin-top: 1.8756698821rem;
1499
- }
1500
- .ilo--card--detail {
1501
- border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1502
- padding: 1.2861736334rem 0;
1503
- position: relative;
1504
- }
1505
- @media screen and (min-width: 1024px) {
1506
- .ilo--card--detail {
1507
- padding: 1.7148981779rem 0;
1338
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--link-list, .ilo--card__type__feature.ilo--card__size__fluid .ilo--link-list {
1339
+ width: calc(100% + 48px);
1340
+ align-self: flex-end;
1508
1341
  }
1509
1342
  }
1510
- .ilo--card--detail:hover, .ilo--card--detail:focus, .ilo--card--detail:focus-within {
1511
- filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1512
- }
1513
- .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before, .ilo--card--detail:focus-within picture::before {
1514
- opacity: 0.4;
1515
- z-index: 2;
1516
- }
1517
- .ilo--card--detail:hover .ilo--card--event-date::before, .ilo--card--detail:focus .ilo--card--event-date::before, .ilo--card--detail:focus-within .ilo--card--event-date::before {
1518
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(30, 45, 190)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1343
+ .ilo--card__type__feature .ilo--card--wrap {
1344
+ display: flex;
1345
+ flex-direction: column;
1346
+ width: 100%;
1519
1347
  }
1520
- .ilo--card--detail picture {
1348
+ .ilo--card__type__feature picture {
1521
1349
  display: flex;
1350
+ height: 100%;
1522
1351
  position: relative;
1523
1352
  }
1524
- .ilo--card--detail picture::before {
1353
+ .ilo--card__type__feature picture::before {
1525
1354
  background-color: rgb(30, 45, 190);
1526
1355
  content: "";
1527
1356
  display: block;
@@ -1530,725 +1359,590 @@ body {
1530
1359
  opacity: 0;
1531
1360
  position: absolute;
1532
1361
  top: 0;
1362
+ transition: opacity 150ms ease-in-out;
1533
1363
  width: 100%;
1534
1364
  z-index: -1;
1535
- transition-property: opacity;
1536
- transition-duration: 150ms;
1537
- transition-timing-function: ease-out;
1538
1365
  }
1539
- .ilo--card--detail .ilo--card--wrap {
1366
+ .ilo--card__type__feature .ilo--card--content {
1540
1367
  display: flex;
1368
+ flex: 1 1 auto;
1369
+ flex-direction: column;
1370
+ padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
1541
1371
  }
1542
- .right-to-left .ilo--card--detail .ilo--card--wrap {
1543
- flex-direction: row-reverse;
1544
- }
1545
- .ilo--card--detail .ilo--card--image {
1546
- object-fit: contain;
1547
- width: 4.1264737406rem;
1548
- }
1549
- @media screen and (min-width: 1024px) {
1550
- .ilo--card--detail .ilo--card--image {
1551
- width: 10.718113612rem;
1552
- }
1553
- }
1554
- .ilo--card--detail .ilo--card--image--wrapper {
1555
- max-width: 4.1264737406rem;
1556
- width: 100%;
1557
- }
1558
- @media screen and (min-width: 1024px) {
1559
- .ilo--card--detail .ilo--card--image--wrapper {
1560
- max-width: 10.718113612rem;
1561
- }
1562
- }
1563
- .ilo--card--detail .ilo--card--content {
1564
- padding: 0 1.2861736334rem;
1372
+ .ilo--card__type__feature.ilo--card__linklist .ilo--card--content {
1373
+ padding-bottom: 0;
1565
1374
  }
1566
- .ilo--card--detail .ilo--card--title {
1567
- font-size: 18.66px;
1375
+ .ilo--card__type__feature .ilo--card--title {
1376
+ font-size: 23.32px;
1568
1377
  letter-spacing: -0.035em;
1569
- line-height: 24.26px;
1570
- }
1571
- @media screen and (min-width: 1024px) {
1572
- .ilo--card--detail .ilo--card--title {
1573
- font-size: 23.32px;
1574
- letter-spacing: -0.035em;
1575
- line-height: 29.15px;
1576
- }
1378
+ line-height: 29.15px;
1379
+ margin-bottom: 1.5763397642rem;
1380
+ font-family: Overpass;
1381
+ font-weight: 700;
1577
1382
  }
1578
- .ilo--card--detail .ilo--card--event-date {
1579
- font-size: 16px;
1383
+ .ilo--card__type__feature .ilo--card--eyebrow {
1384
+ font-size: 14.93px;
1580
1385
  letter-spacing: normal;
1581
- line-height: 23.36px;
1582
- margin-bottom: 0;
1583
- padding-left: 1.2861736334rem;
1584
- position: relative;
1585
- }
1586
- .ilo--card--detail .ilo--card--event-date::before {
1587
- background-repeat: no-repeat;
1588
- content: "";
1589
- display: inline-block;
1590
- height: 0.7502679528rem;
1591
- left: 0;
1592
- position: absolute;
1593
- top: 50%;
1594
- transform: rotate(-90deg) translateX(50%);
1595
- width: 0.6430868167rem;
1596
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(45, 45, 45)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1386
+ line-height: 19.71px;
1387
+ margin-bottom: 0.3376482577rem;
1597
1388
  }
1598
- .ilo--card--detail .ilo--card--date {
1599
- font-size: 16px;
1600
- letter-spacing: normal;
1601
- line-height: 23.36px;
1389
+ .ilo--card__type__feature .ilo--card--date {
1390
+ margin-bottom: 0;
1391
+ margin-top: auto;
1602
1392
  }
1603
- .ilo--card--graphic {
1393
+
1394
+ /**
1395
+ * Do not edit directly
1396
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1397
+ */
1398
+ /**
1399
+ * TOKENS:
1400
+ */
1401
+ /**
1402
+ * MAPS:
1403
+ */
1404
+ .ilo--card__type__text {
1405
+ --max-width: 16.1307609861rem;
1604
1406
  border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1605
- margin-top: 2.1436227224rem;
1606
- padding: 0 1.2861736334rem 2.1436227224rem;
1607
- position: relative;
1608
- }
1609
- .ilo--card--graphic::before {
1610
- background: inherit;
1611
- content: "";
1612
- display: block;
1613
- height: 40px;
1614
- position: absolute;
1615
- width: calc(100% - 73px);
1616
- }
1617
- .ilo--card--graphic::after {
1618
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1619
- background-position: bottom right;
1620
- background-size: cover;
1621
- content: "";
1622
- height: 40px;
1623
- display: block;
1624
- position: absolute;
1625
- width: 73.4px;
1626
- }
1627
- .ilo--card--graphic.ilo--card--dark::after {
1628
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1629
- }
1630
- .ilo--card--graphic.ilo--card--dark:hover::after, .ilo--card--graphic.ilo--card--dark:focus::after, .ilo--card--graphic.ilo--card--dark:focus-within::after {
1631
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1632
- }
1633
- .ilo--card--graphic::before {
1634
- left: 0;
1635
- top: -39.7px;
1636
- }
1637
- .right-to-left .ilo--card--graphic::before {
1638
- left: auto;
1639
- right: 0;
1640
- }
1641
- .ilo--card--graphic::after {
1642
- right: 0;
1643
- top: -39.7px;
1644
- transition: background-image 150ms ease-out;
1407
+ padding: 1.2861736334rem 2.1436227224rem;
1408
+ clip-path: polygon(0 0, calc(100% - 73px) 0, 100% 40px, 100% 100%, 0 100%);
1645
1409
  }
1646
- .right-to-left .ilo--card--graphic::after {
1647
- left: 0;
1648
- right: auto;
1649
- transform: rotateY(180deg);
1650
- }
1651
- .ilo--card--graphic .ilo--profile--contents--light * {
1410
+ .ilo--card__type__text [class$=profile--contents--light] * {
1652
1411
  color: rgb(45, 45, 45);
1653
1412
  }
1654
- .ilo--card--graphic .ilo--profile--contents--dark * {
1413
+ .ilo--card__type__text [class$=profile--contents--dark] * {
1655
1414
  color: rgb(255, 255, 255);
1656
1415
  }
1657
- .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
1416
+ .ilo--card__type__text:hover, .ilo--card__type__text:focus, .ilo--card__type__text:focus-within {
1658
1417
  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1659
1418
  }
1660
- .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents *, .ilo--card--graphic:focus-within .ilo--profile--contents * {
1419
+ .ilo--card__type__text:hover [class*=profile--contents] *, .ilo--card__type__text:focus [class*=profile--contents] *, .ilo--card__type__text:focus-within [class*=profile--contents] * {
1661
1420
  color: rgb(30, 45, 190);
1662
1421
  }
1663
1422
  @media screen and (min-width: 610px) {
1664
- .ilo--card--graphic {
1665
- padding: 0 1.7148981779rem 2.1436227224rem;
1666
- }
1667
- .ilo--card--graphic::before {
1668
- background: inherit;
1669
- content: "";
1670
- display: block;
1671
- height: 40px;
1672
- position: absolute;
1673
- width: calc(100% - 73px);
1674
- }
1675
- .ilo--card--graphic::after {
1676
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1677
- background-position: bottom right;
1678
- background-size: cover;
1679
- content: "";
1680
- height: 40px;
1681
- display: block;
1682
- position: absolute;
1683
- width: 73.4px;
1684
- }
1685
- .ilo--card--graphic.ilo--card--dark::after {
1686
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1687
- }
1688
- .ilo--card--graphic.ilo--card--dark:hover::after, .ilo--card--graphic.ilo--card--dark:focus::after, .ilo--card--graphic.ilo--card--dark:focus-within::after {
1689
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1690
- }
1691
- .ilo--card--graphic::before {
1692
- left: 0;
1693
- top: -39.7px;
1694
- }
1695
- .right-to-left .ilo--card--graphic::before {
1696
- left: auto;
1697
- right: 0;
1698
- }
1699
- .ilo--card--graphic::after {
1700
- right: 0;
1701
- top: -39.7px;
1702
- }
1703
- .right-to-left .ilo--card--graphic::after {
1704
- left: 0;
1705
- right: auto;
1706
- transform: rotateY(180deg);
1707
- }
1708
- }
1709
- @media screen and (min-width: 1024px) {
1710
- .ilo--card--graphic::before {
1711
- background: inherit;
1712
- content: "";
1713
- display: block;
1714
- height: 40px;
1715
- position: absolute;
1716
- width: calc(100% - 73px);
1717
- }
1718
- .ilo--card--graphic::after {
1719
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1720
- background-position: bottom right;
1721
- background-size: cover;
1722
- content: "";
1723
- height: 40px;
1724
- display: block;
1725
- position: absolute;
1726
- width: 73.4px;
1727
- }
1728
- .ilo--card--graphic.ilo--card--dark::after {
1729
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(35, 0, 80)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1730
- }
1731
- .ilo--card--graphic.ilo--card--dark:hover::after, .ilo--card--graphic.ilo--card--dark:focus::after, .ilo--card--graphic.ilo--card--dark:focus-within::after {
1732
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 255, 255)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
1733
- }
1734
- .ilo--card--graphic::before {
1735
- left: 0;
1736
- top: -39.7px;
1737
- }
1738
- .right-to-left .ilo--card--graphic::before {
1739
- left: auto;
1740
- right: 0;
1741
- }
1742
- .ilo--card--graphic::after {
1743
- right: 0;
1744
- top: -39.7px;
1745
- }
1746
- .right-to-left .ilo--card--graphic::after {
1747
- left: 0;
1748
- right: auto;
1749
- transform: rotateY(180deg);
1750
- }
1751
- }
1752
- .ilo--card--graphic.ilo--card--wide {
1753
- padding: 0 1.7148981779rem 2.1436227224rem;
1754
- }
1755
- @media screen and (min-width: 610px) {
1756
- .ilo--card--graphic.ilo--card--wide {
1757
- padding: 0 1.7148981779rem 2.1436227224rem;
1423
+ .ilo--card__type__text {
1424
+ padding: 1.7148981779rem 2.1436227224rem;
1758
1425
  }
1759
1426
  }
1760
- .ilo--card--graphic.ilo--card--standard {
1761
- padding: 0 1.7148981779rem 2.1436227224rem;
1427
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1428
+ --max-width: 28.0278670954rem;
1429
+ padding: 1.7148981779rem 2.1436227224rem;
1762
1430
  }
1763
1431
  @media screen and (min-width: 610px) {
1764
- .ilo--card--graphic.ilo--card--standard {
1765
- padding: 0 1.7148981779rem 2.1436227224rem;
1432
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1433
+ padding: 1.7148981779rem 2.1436227224rem;
1766
1434
  }
1767
1435
  }
1768
- .ilo--card--graphic.ilo--card--narrow {
1769
- padding: 0 1.2861736334rem 2.1436227224rem;
1436
+ .ilo--card__type__text.ilo--card__size__narrow {
1437
+ --max-width: 16.1307609861rem;
1438
+ padding: 1.2861736334rem 2.1436227224rem;
1770
1439
  }
1771
1440
  @media screen and (min-width: 610px) {
1772
- .ilo--card--graphic.ilo--card--narrow {
1773
- padding: 0 1.2861736334rem 2.1436227224rem;
1441
+ .ilo--card__type__text.ilo--card__size__narrow {
1442
+ padding: 1.2861736334rem 2.1436227224rem;
1774
1443
  }
1775
1444
  }
1776
- .ilo--card--graphic.ilo--card--narrow .ilo--card--title {
1445
+ .ilo--card__type__text.ilo--card__size__narrow .ilo--card--title {
1777
1446
  font-size: 18.66px;
1778
1447
  letter-spacing: -0.035em;
1779
1448
  line-height: 24.26px;
1780
1449
  margin-bottom: 1.674953518rem;
1781
1450
  }
1782
- .ilo--card--graphic.ilo--card--dark {
1451
+ .ilo--card__type__text.ilo--card__dark {
1783
1452
  border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1784
1453
  }
1785
- .ilo--card--graphic .ilo--card--eyebrow {
1454
+ .ilo--card__type__text .ilo--card--eyebrow {
1786
1455
  margin-bottom: 1.0110920672rem;
1787
1456
  }
1788
- .ilo--card--graphic .ilo--card--title {
1457
+ .ilo--card__type__text .ilo--card--title {
1789
1458
  font-size: 18.66px;
1790
1459
  letter-spacing: -0.035em;
1791
1460
  line-height: 24.26px;
1792
1461
  margin-bottom: 1.674953518rem;
1793
1462
  }
1794
1463
  @media screen and (min-width: 610px) {
1795
- .ilo--card--graphic .ilo--card--title {
1464
+ .ilo--card__type__text .ilo--card--title {
1796
1465
  font-size: 23.32px;
1797
1466
  letter-spacing: -0.035em;
1798
1467
  line-height: 29.15px;
1799
1468
  margin-bottom: 1.5763397642rem;
1800
1469
  }
1801
1470
  }
1802
- .ilo--card--graphic .ilo--card--date {
1803
- display: block;
1804
- margin-bottom: 1.4398166117rem;
1471
+ .ilo--card__type__text .ilo--card--date {
1472
+ display: block;
1473
+ margin-bottom: 1.4398166117rem;
1474
+ }
1475
+ .ilo--card__type__text .ilo--card--content {
1476
+ display: flex;
1477
+ flex-direction: column;
1478
+ position: relative;
1479
+ }
1480
+ .ilo--card__type__text .ilo--card--content > * {
1481
+ justify-self: flex-start;
1482
+ }
1483
+ .ilo--card__type__text .ilo--card--content > *:last-child {
1484
+ justify-self: flex-end;
1485
+ margin-bottom: 0;
1486
+ }
1487
+
1488
+ /**
1489
+ * Do not edit directly
1490
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1491
+ */
1492
+ /**
1493
+ * TOKENS:
1494
+ */
1495
+ /**
1496
+ * MAPS:
1497
+ */
1498
+ .ilo--card__type__detail {
1499
+ --max-width: 18.3815648446rem;
1500
+ border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1501
+ padding: 1.2861736334rem 0;
1502
+ position: relative;
1503
+ }
1504
+ @media screen and (min-width: 1024px) {
1505
+ .ilo--card__type__detail {
1506
+ padding: 1.7148981779rem 0;
1507
+ }
1508
+ }
1509
+ .ilo--card__type__detail:hover, .ilo--card__type__detail:focus, .ilo--card__type__detail:focus-within {
1510
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1511
+ }
1512
+ .ilo--card__type__detail:hover picture::before, .ilo--card__type__detail:focus picture::before, .ilo--card__type__detail:focus-within picture::before {
1513
+ opacity: 0.4;
1514
+ z-index: 2;
1515
+ }
1516
+ .ilo--card__type__detail:hover .ilo--card--date-extra::before, .ilo--card__type__detail:focus .ilo--card--date-extra::before, .ilo--card__type__detail:focus-within .ilo--card--date-extra::before {
1517
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(30, 45, 190)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1518
+ }
1519
+ .ilo--card__type__detail .ilo--card--title {
1520
+ font-size: 18.66px;
1521
+ letter-spacing: -0.035em;
1522
+ line-height: 24.26px;
1523
+ }
1524
+ @media screen and (min-width: 1024px) {
1525
+ .ilo--card__size__wide .ilo--card__type__detail .ilo--card--title {
1526
+ font-size: 23.32px;
1527
+ letter-spacing: -0.035em;
1528
+ line-height: 29.15px;
1529
+ }
1530
+ .ilo--card__size__wide .ilo--card__type__detail .ilo--card--title {
1531
+ font-size: 18.66px;
1532
+ letter-spacing: -0.035em;
1533
+ line-height: 24.26px;
1534
+ }
1535
+ }
1536
+ .ilo--card__type__detail.ilo--card__size__wide, .ilo--card__type__detail.ilo--card__size__fluid {
1537
+ --max-width: 39.9249732047rem;
1538
+ }
1539
+ @media screen and (min-width: 1024px) {
1540
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--title, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--title {
1541
+ font-size: 23.32px;
1542
+ letter-spacing: -0.035em;
1543
+ line-height: 29.15px;
1544
+ }
1545
+ }
1546
+ @media screen and (min-width: 1024px) {
1547
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--image--wrapper {
1548
+ flex: 0 0 10.5037513398rem;
1549
+ }
1550
+ }
1551
+ @media screen and (min-width: 1024px) {
1552
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--picture, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--picture {
1553
+ width: 10.5037513398rem;
1554
+ }
1555
+ }
1556
+ .ilo--card__type__detail.ilo--card__size__narrow {
1557
+ --max-width: 18.3815648446rem;
1558
+ }
1559
+ .ilo--card__type__detail picture {
1560
+ display: flex;
1561
+ position: relative;
1562
+ }
1563
+ .ilo--card__type__detail picture::before {
1564
+ background-color: rgb(30, 45, 190);
1565
+ content: "";
1566
+ display: block;
1567
+ height: 100%;
1568
+ left: 0;
1569
+ opacity: 0;
1570
+ position: absolute;
1571
+ top: 0;
1572
+ width: 100%;
1573
+ z-index: -1;
1574
+ transition-property: opacity;
1575
+ transition-duration: 150ms;
1576
+ transition-timing-function: ease-out;
1577
+ }
1578
+ .ilo--card__type__detail .ilo--card--wrap {
1579
+ display: flex;
1580
+ }
1581
+ .right-to-left .ilo--card__type__detail .ilo--card--wrap {
1582
+ flex-direction: row-reverse;
1583
+ }
1584
+ .ilo--card__type__detail .ilo--card--title {
1585
+ font-size: 18.66px;
1586
+ letter-spacing: -0.035em;
1587
+ line-height: 24.26px;
1588
+ }
1589
+ .ilo--card__type__detail .ilo--card--image--wrapper {
1590
+ flex: 0 0 4.1264737406rem;
1591
+ }
1592
+ .ilo--card__type__detail .ilo--card--picture {
1593
+ object-fit: contain;
1594
+ width: 4.1264737406rem;
1595
+ }
1596
+ .ilo--card__type__detail .ilo--card--content {
1597
+ padding: 0 1.2861736334rem;
1805
1598
  }
1806
- .ilo--card--graphic .ilo--card--content {
1807
- display: flex;
1808
- flex-direction: column;
1599
+ .ilo--card__type__detail .ilo--card--date-extra {
1600
+ font-size: 16px;
1601
+ letter-spacing: normal;
1602
+ line-height: 23.36px;
1603
+ margin-bottom: 0;
1604
+ padding-left: 1.2861736334rem;
1809
1605
  position: relative;
1810
1606
  }
1811
- .ilo--card--graphic .ilo--card--content > * {
1812
- justify-self: flex-start;
1607
+ .ilo--card__type__detail .ilo--card--date-extra::before {
1608
+ background-repeat: no-repeat;
1609
+ content: "";
1610
+ display: inline-block;
1611
+ height: 0.7502679528rem;
1612
+ left: 0;
1613
+ position: absolute;
1614
+ top: 50%;
1615
+ transform: rotate(-90deg) translateX(50%);
1616
+ width: 0.6430868167rem;
1617
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(45, 45, 45)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1813
1618
  }
1814
- .ilo--card--graphic .ilo--card--content > *:last-child {
1815
- justify-self: flex-end;
1816
- margin-bottom: 0;
1619
+ .ilo--card__type__detail .ilo--card--date {
1620
+ font-size: 16px;
1621
+ letter-spacing: normal;
1622
+ line-height: 23.36px;
1817
1623
  }
1818
- .ilo--card--graphicpromo {
1819
- max-width: 49.3033226152rem;
1624
+
1625
+ /**
1626
+ * Do not edit directly
1627
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1628
+ */
1629
+ /**
1630
+ * TOKENS:
1631
+ */
1632
+ /**
1633
+ * MAPS:
1634
+ */
1635
+ .ilo--card__type__promo {
1636
+ --max-width: 18.3815648446rem;
1820
1637
  padding: 2.1436227224rem 1.2861736334rem;
1821
1638
  width: 100%;
1822
1639
  }
1823
- .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus, .ilo--card--graphicpromo:focus-within {
1824
- filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1825
- }
1826
1640
  @media screen and (min-width: 610px) {
1827
- .ilo--card--graphicpromo {
1641
+ .ilo--card__type__promo {
1828
1642
  padding: 2.5723472669rem;
1829
1643
  }
1830
1644
  }
1831
1645
  @media screen and (min-width: 1024px) {
1832
- .ilo--card--graphicpromo {
1646
+ .ilo--card__type__promo {
1833
1647
  padding: 3.4297963558rem 3.8585209003rem;
1834
1648
  }
1835
1649
  }
1836
- .ilo--card--graphicpromo.ilo--card--wide {
1837
- padding: 3.4297963558rem 3.8585209003rem;
1650
+ .ilo--card__type__promo.ilo--card__size__standard {
1651
+ --max-width: 33.9764201501rem;
1652
+ padding: 2.5723472669rem;
1838
1653
  }
1839
1654
  @media screen and (min-width: 610px) {
1840
- .ilo--card--graphicpromo.ilo--card--wide {
1841
- padding: 3.4297963558rem 3.8585209003rem;
1655
+ .ilo--card__type__promo.ilo--card__size__standard {
1656
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1842
1657
  }
1843
1658
  }
1844
1659
  @media screen and (min-width: 1024px) {
1845
- .ilo--card--graphicpromo.ilo--card--wide {
1846
- padding: 3.4297963558rem 3.8585209003rem;
1660
+ .ilo--card__type__promo.ilo--card__size__standard {
1661
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1847
1662
  }
1848
1663
  }
1849
- .ilo--card--graphicpromo.ilo--card--standard {
1850
- padding: 2.5723472669rem;
1664
+ .ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut {
1665
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
1666
+ }
1667
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1668
+ --max-width: 49.3033226152rem;
1669
+ padding: 3.4297963558rem 3.8585209003rem;
1851
1670
  }
1852
1671
  @media screen and (min-width: 610px) {
1853
- .ilo--card--graphicpromo.ilo--card--standard {
1854
- padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem 2.5723472669rem;
1672
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1673
+ padding: 3.4297963558rem 3.8585209003rem;
1855
1674
  }
1856
1675
  }
1857
1676
  @media screen and (min-width: 1024px) {
1858
- .ilo--card--graphicpromo.ilo--card--standard {
1859
- padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem 2.5723472669rem;
1677
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1678
+ padding: 3.4297963558rem 3.8585209003rem;
1860
1679
  }
1861
1680
  }
1862
- .ilo--card--graphicpromo.ilo--card--narrow {
1681
+ .ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut, .ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut {
1682
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
1683
+ }
1684
+ .ilo--card__type__promo.ilo--card__size__narrow {
1685
+ --max-width: 18.3815648446rem;
1863
1686
  padding: 2.1436227224rem 1.2861736334rem;
1864
1687
  }
1865
1688
  @media screen and (min-width: 610px) {
1866
- .ilo--card--graphicpromo.ilo--card--narrow {
1689
+ .ilo--card__type__promo.ilo--card__size__narrow {
1867
1690
  padding: 2.1436227224rem 1.2861736334rem;
1868
1691
  }
1869
1692
  }
1870
1693
  @media screen and (min-width: 1024px) {
1871
- .ilo--card--graphicpromo.ilo--card--narrow {
1694
+ .ilo--card__type__promo.ilo--card__size__narrow {
1872
1695
  padding: 2.1436227224rem 1.2861736334rem;
1873
1696
  }
1874
1697
  }
1875
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1698
+ .ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut {
1699
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
1700
+ }
1701
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1876
1702
  font-size: 29.16px;
1877
1703
  letter-spacing: -0.035em;
1878
1704
  line-height: 36.45px;
1879
1705
  margin-bottom: 0.5741425509rem;
1880
1706
  }
1881
1707
  @media screen and (min-width: 610px) {
1882
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1708
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1883
1709
  font-size: 36.45px;
1884
1710
  letter-spacing: -0.035em;
1885
1711
  line-height: 43.74px;
1886
1712
  margin-bottom: 0.4278063594rem;
1887
1713
  }
1888
1714
  }
1889
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--intro {
1715
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--intro {
1890
1716
  font-size: 16px;
1891
1717
  letter-spacing: normal;
1892
1718
  line-height: 23.36px;
1893
1719
  margin-bottom: 1.910132288rem;
1894
1720
  }
1895
- .ilo--card--graphicpromo.ilo--card--light:not(:hover) .ilo--card--title {
1721
+ .ilo--card__type__promo.ilo--card__theme__light:not(:hover) .ilo--card--title {
1896
1722
  color: rgb(45, 45, 45);
1897
1723
  transition-property: color;
1898
1724
  transition-duration: 150ms;
1899
1725
  transition-timing-function: ease-out;
1900
1726
  }
1901
- .ilo--card--graphicpromo .ilo--card--title {
1727
+ .ilo--card__type__promo .ilo--card--title {
1902
1728
  font-size: 29.16px;
1903
1729
  letter-spacing: -0.035em;
1904
1730
  line-height: 36.45px;
1905
1731
  margin-bottom: 0.5741425509rem;
1906
1732
  }
1907
1733
  @media screen and (min-width: 610px) {
1908
- .ilo--card--graphicpromo .ilo--card--title {
1734
+ .ilo--card__type__promo .ilo--card--title {
1909
1735
  font-size: 36.45px;
1910
1736
  letter-spacing: -0.035em;
1911
1737
  line-height: 43.74px;
1912
1738
  margin-bottom: 0.8565309039rem;
1913
1739
  }
1914
1740
  }
1915
- .ilo--card--graphicpromo .ilo--card--intro {
1741
+ .ilo--card__type__promo .ilo--card--intro {
1916
1742
  font-size: 16px;
1917
1743
  letter-spacing: normal;
1918
1744
  line-height: 23.36px;
1919
1745
  margin-bottom: 1.910132288rem;
1920
1746
  }
1921
1747
  @media screen and (min-width: 610px) {
1922
- .ilo--card--graphicpromo .ilo--card--intro {
1748
+ .ilo--card__type__promo .ilo--card--intro {
1923
1749
  font-size: 18.66px;
1924
1750
  letter-spacing: normal;
1925
1751
  line-height: 27.24px;
1926
1752
  margin-bottom: 1.8685411561rem;
1927
1753
  }
1928
1754
  }
1929
- .ilo--card--factlist {
1930
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1931
- max-width: 45.8735262594rem;
1932
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1933
- pointer-events: none;
1934
- }
1935
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1936
- height: 40px;
1937
- top: -2.127545552rem;
1938
- width: calc(100% - 73px);
1939
- }
1940
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1941
- height: 40px;
1942
- top: -2.127545552rem;
1943
- width: 73.3px;
1944
- }
1945
- .ilo--card--factlist.ilo--card--dark {
1946
- background: rgb(35, 0, 80);
1947
- }
1948
- @media screen and (min-width: 1024px) {
1949
- .ilo--card--factlist {
1950
- padding: 0 2.1436227224rem 3.0010718114rem 2.1436227224rem;
1951
- }
1952
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1953
- height: 48px;
1954
- top: -2.5562700965rem;
1955
- width: calc(100% - 87px);
1956
- }
1957
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1958
- height: 48px;
1959
- top: -2.5562700965rem;
1960
- width: 87.3px;
1961
- }
1962
- }
1963
- .ilo--card--factlist.ilo--card--wide {
1964
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1755
+
1756
+ /**
1757
+ * Do not edit directly
1758
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1759
+ */
1760
+ /**
1761
+ * TOKENS:
1762
+ */
1763
+ /**
1764
+ * MAPS:
1765
+ */
1766
+ .ilo--card__type__multilink {
1767
+ --max-width: 28.7245444802rem;
1768
+ padding: 1.2861736334rem;
1965
1769
  }
1966
- @media screen and (min-width: 610px) {
1967
- .ilo--card--factlist.ilo--card--wide {
1968
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
1969
- }
1770
+ .ilo--card__type__multilink .ilo--card--image--wrapper {
1771
+ display: none;
1970
1772
  }
1971
- .ilo--card--factlist.ilo--card--standard {
1972
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1773
+ .ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper {
1774
+ display: block;
1973
1775
  }
1974
1776
  @media screen and (min-width: 610px) {
1975
- .ilo--card--factlist.ilo--card--standard {
1976
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
1777
+ .ilo--card__type__multilink {
1778
+ padding: 2.1436227224rem;
1977
1779
  }
1978
1780
  }
1979
- .ilo--card--factlist.ilo--card--narrow {
1980
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1981
- }
1982
- @media screen and (min-width: 610px) {
1983
- .ilo--card--factlist.ilo--card--narrow {
1984
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1781
+ @media screen and (min-width: 1024px) {
1782
+ .ilo--card__type__multilink {
1783
+ padding: 3.0010718114rem 2.5723472669rem;
1985
1784
  }
1986
1785
  }
1987
- .ilo--card--factlist.ilo--card--dark {
1988
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1989
- }
1990
- .ilo--card--factlist.ilo--card--dark .ilo--card--title {
1991
- color: rgb(255, 255, 255);
1992
- transition-property: color;
1993
- transition-duration: 150ms;
1994
- transition-timing-function: ease-out;
1995
- }
1996
- .ilo--card--factlist.ilo--card--dark .ilo--list__item {
1997
- color: rgb(255, 255, 255);
1998
- }
1999
- .ilo--card--factlist.ilo--card--dark .ilo--list__item:last-of-type {
2000
- margin-bottom: 0;
2001
- }
2002
- .ilo--card--factlist.ilo--card--dark:hover .ilo--card--title, .ilo--card--factlist.ilo--card--dark:focus .ilo--card--title, .ilo--card--factlist.ilo--card--dark:focus-within .ilo--card--title {
2003
- color: rgb(255, 255, 255);
2004
- transition-property: color;
2005
- transition-duration: 150ms;
2006
- transition-timing-function: ease-out;
2007
- }
2008
- .ilo--card--factlist.ilo--card--dark:hover .ilo--list__item, .ilo--card--factlist.ilo--card--dark:focus .ilo--list__item, .ilo--card--factlist.ilo--card--dark:focus-within .ilo--list__item {
2009
- color: rgb(255, 255, 255);
2010
- }
2011
- .ilo--card--factlist .ilo--card--title {
2012
- color: rgb(45, 45, 45);
1786
+ .ilo--card__type__multilink .ilo--card--title {
2013
1787
  font-size: 23.32px;
2014
1788
  letter-spacing: -0.035em;
2015
1789
  line-height: 29.15px;
2016
- margin-bottom: 1.1476152197rem;
1790
+ margin-bottom: 0.7188906752rem;
1791
+ color: rgb(45, 45, 45);
2017
1792
  }
2018
- @media screen and (min-width: 1024px) {
2019
- .ilo--card--factlist .ilo--card--title {
1793
+ @media screen and (min-width: 610px) {
1794
+ .ilo--card__type__multilink .ilo--card--title {
2020
1795
  font-size: 29.16px;
2021
1796
  letter-spacing: -0.035em;
2022
1797
  line-height: 36.45px;
2023
- margin-bottom: 1.4315916399rem;
1798
+ margin-bottom: 0.5741425509rem;
2024
1799
  }
2025
1800
  }
2026
- .ilo--card--stat {
2027
- border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
2028
- margin-top: 2.1436227224rem;
2029
- padding: 0 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2030
- position: relative;
2031
- width: 100%;
2032
- }
2033
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2034
- left: 0;
2035
- top: -2.127545552rem;
2036
- }
2037
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2038
- left: auto;
2039
- right: 0;
2040
- }
2041
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2042
- right: 0;
2043
- top: -2.127545552rem;
2044
- }
2045
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2046
- left: 0;
2047
- right: auto;
2048
- transform: rotateY(180deg);
2049
- }
2050
- .ilo--card--stat.ilo--card--blue {
2051
- background: rgb(235, 245, 253);
2052
- }
2053
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2054
- background: inherit;
2055
- content: "";
2056
- display: block;
2057
- height: 40px;
2058
- position: absolute;
2059
- width: calc(100% - 73px);
2060
- }
2061
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2062
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(235, 245, 253)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2063
- background-position: bottom right;
2064
- background-size: cover;
2065
- content: "";
2066
- height: 40px;
2067
- display: block;
2068
- position: absolute;
2069
- width: 73.4px;
1801
+ .ilo--card__type__multilink .ilo--card--intro {
1802
+ font-size: 16px;
1803
+ letter-spacing: normal;
1804
+ line-height: 23.36px;
1805
+ margin-bottom: 1.910132288rem;
1806
+ color: rgb(45, 45, 45);
2070
1807
  }
2071
- .ilo--card--stat.ilo--card--yellow {
2072
- background: rgb(255, 205, 45);
1808
+ @media screen and (min-width: 610px) {
1809
+ .ilo--card__type__multilink .ilo--card--intro {
1810
+ font-size: 18.66px;
1811
+ letter-spacing: normal;
1812
+ line-height: 27.24px;
1813
+ margin-bottom: 1.8685411561rem;
1814
+ }
2073
1815
  }
2074
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2075
- background: inherit;
2076
- content: "";
2077
- display: block;
2078
- height: 40px;
2079
- position: absolute;
2080
- width: calc(100% - 73px);
1816
+ .ilo--card__type__multilink.ilo--card__size__standard {
1817
+ --max-width: 28.7245444802rem;
1818
+ padding: 2.5723472669rem 2.1436227224rem;
2081
1819
  }
2082
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2083
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(255, 205, 45)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2084
- background-position: bottom right;
2085
- background-size: cover;
2086
- content: "";
2087
- height: 40px;
2088
- display: block;
2089
- position: absolute;
2090
- width: 73.4px;
1820
+ @media screen and (min-width: 610px) {
1821
+ .ilo--card__type__multilink.ilo--card__size__standard {
1822
+ padding: 2.5723472669rem 2.1436227224rem;
1823
+ }
2091
1824
  }
2092
- .ilo--card--stat.ilo--card--green {
2093
- background: rgb(140, 225, 100);
1825
+ @media screen and (min-width: 1024px) {
1826
+ .ilo--card__type__multilink.ilo--card__size__standard {
1827
+ padding: 2.5723472669rem 2.1436227224rem;
1828
+ }
2094
1829
  }
2095
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2096
- background: inherit;
2097
- content: "";
2098
- display: block;
2099
- height: 40px;
2100
- position: absolute;
2101
- width: calc(100% - 73px);
1830
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1831
+ --max-width: 20.0964630225rem;
1832
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
2102
1833
  }
2103
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2104
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(140, 225, 100)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2105
- background-position: bottom right;
2106
- background-size: cover;
2107
- content: "";
2108
- height: 40px;
2109
- display: block;
2110
- position: absolute;
2111
- width: 73.4px;
1834
+ @media screen and (min-width: 610px) {
1835
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1836
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1837
+ }
2112
1838
  }
2113
- .ilo--card--stat.ilo--card--turquoise {
2114
- background: rgb(5, 210, 210);
1839
+ @media screen and (min-width: 1024px) {
1840
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1841
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1842
+ }
2115
1843
  }
2116
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2117
- background: inherit;
2118
- content: "";
2119
- display: block;
2120
- height: 40px;
2121
- position: absolute;
2122
- width: calc(100% - 73px);
1844
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper {
1845
+ display: none;
2123
1846
  }
2124
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2125
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(5, 210, 210)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2126
- background-position: bottom right;
2127
- background-size: cover;
2128
- content: "";
2129
- height: 40px;
1847
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper {
2130
1848
  display: block;
2131
- position: absolute;
2132
- width: 73.4px;
1849
+ margin-bottom: 1.2861736334rem;
2133
1850
  }
2134
- .ilo--card--stat .ilo--card--content {
2135
- display: flex;
2136
- flex-wrap: wrap;
2137
- height: 100%;
1851
+ @media screen and (min-width: 610px) {
1852
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title {
1853
+ font-size: 23.32px;
1854
+ letter-spacing: -0.035em;
1855
+ line-height: 29.15px;
1856
+ margin-bottom: 0.7188906752rem;
1857
+ }
2138
1858
  }
2139
- .right-to-left .ilo--card--stat .ilo--card--content {
2140
- flex-direction: row-reverse;
1859
+ @media screen and (min-width: 610px) {
1860
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro {
1861
+ font-size: 16px;
1862
+ letter-spacing: normal;
1863
+ line-height: 23.36px;
1864
+ margin-bottom: 1.910132288rem;
1865
+ }
2141
1866
  }
2142
- .ilo--card--stat .ilo--card--title {
2143
- color: rgb(35, 0, 80);
2144
- font-size: 36.45px;
2145
- letter-spacing: -0.035em;
2146
- line-height: 43.74px;
2147
- margin-bottom: 0.4278063594rem;
2148
- width: 100%;
1867
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1868
+ --max-width: 59.1639871383rem;
1869
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
2149
1870
  }
2150
- .ilo--card--stat .ilo--card--intro {
2151
- color: rgb(35, 0, 80);
2152
- font-family: Overpass;
2153
- font-size: 18.66px;
2154
- letter-spacing: normal;
2155
- line-height: 27.24px;
2156
- margin-bottom: 1.6734954235rem;
2157
- width: 100%;
1871
+ @media screen and (min-width: 610px) {
1872
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1873
+ padding: 3.0010718114rem 2.5723472669rem;
1874
+ }
1875
+ .ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap, .ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap {
1876
+ flex-direction: row-reverse;
1877
+ }
1878
+ .right-to-left .ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap, .right-to-left .ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap {
1879
+ flex-direction: row;
1880
+ }
1881
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap {
1882
+ display: flex;
1883
+ column-gap: 1.7148981779rem;
1884
+ }
1885
+ .right-to-left .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap, .right-to-left .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap {
1886
+ flex-direction: row-reverse;
1887
+ }
1888
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper {
1889
+ display: block;
1890
+ width: 50%;
1891
+ }
1892
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content {
1893
+ width: 50%;
1894
+ }
1895
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content .ilo--card--image--wrapper, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content .ilo--card--image--wrapper {
1896
+ display: none;
1897
+ }
2158
1898
  }
2159
- .ilo--card--stat .ilo--link {
2160
- font-size: 11.94px;
2161
- letter-spacing: -0.02em;
2162
- line-height: 16.24px;
2163
- align-self: flex-end;
1899
+ .ilo--card__type__multilink .ilo--link-list {
1900
+ margin-top: 1.8756698821rem;
1901
+ position: relative;
1902
+ z-index: 3;
2164
1903
  }
2165
- .ilo--card--data {
1904
+
1905
+ /**
1906
+ * Do not edit directly
1907
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1908
+ */
1909
+ /**
1910
+ * TOKENS:
1911
+ */
1912
+ /**
1913
+ * MAPS:
1914
+ */
1915
+ .ilo--card__type__data {
1916
+ --max-width: 16.1307609861rem;
2166
1917
  background: rgb(235, 245, 253);
2167
1918
  border-bottom: 0.1607717042rem solid #82afdc;
2168
1919
  margin-top: 2.1436227224rem;
2169
- max-width: 32.154340836rem;
2170
- padding: 0 1.2861736334rem 3.0010718114rem;
1920
+ padding: 1.2861736334rem 3.0010718114rem;
2171
1921
  position: relative;
1922
+ width: 100%;
2172
1923
  }
2173
- .ilo--card--data::before {
2174
- background: inherit;
2175
- content: "";
2176
- display: block;
2177
- height: 40px;
2178
- position: absolute;
2179
- width: calc(100% - 73px);
2180
- }
2181
- .ilo--card--data::after {
2182
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(235, 245, 253)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2183
- background-position: bottom right;
2184
- background-size: cover;
2185
- content: "";
2186
- height: 40px;
2187
- display: block;
2188
- position: absolute;
2189
- width: 73.4px;
2190
- }
2191
- .ilo--card--data:hover, .ilo--card--data:focus, .ilo--card--data:focus-within {
1924
+ .ilo--card__type__data:hover, .ilo--card__type__data:focus, .ilo--card__type__data:focus-within {
2192
1925
  background: rgb(235, 245, 253);
2193
1926
  }
2194
- .ilo--card--data::before {
2195
- left: 0;
2196
- top: -2.127545552rem;
2197
- }
2198
- .right-to-left .ilo--card--data::before {
2199
- left: auto;
2200
- right: 0;
2201
- }
2202
- .ilo--card--data::after {
2203
- right: 0;
2204
- top: -2.127545552rem;
2205
- }
2206
- .right-to-left .ilo--card--data::after {
2207
- left: 0;
2208
- right: auto;
2209
- transform: rotateY(180deg);
1927
+ .ilo--card__type__data.ilo--card__size__narrow {
1928
+ --max-width: 16.1307609861rem;
1929
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2210
1930
  }
2211
- @media screen and (min-width: 610px) {
2212
- .ilo--card--data::before {
2213
- background: inherit;
2214
- content: "";
2215
- display: block;
2216
- height: 48px;
2217
- position: absolute;
2218
- width: calc(100% - 84px);
2219
- }
2220
- .ilo--card--data::after {
2221
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 64'%3e%3cpath fill='rgb(235, 245, 253)' d='M116 64L0.306641 0V64H116Z'/%3e%3c/svg%3e");
2222
- background-position: bottom right;
2223
- background-size: cover;
2224
- content: "";
2225
- height: 48px;
2226
- display: block;
2227
- position: absolute;
2228
- width: 84.4px;
2229
- }
2230
- .ilo--card--data::before {
2231
- top: -2.5562700965rem;
2232
- }
2233
- .ilo--card--data::after {
2234
- top: -2.5562700965rem;
2235
- }
1931
+ .ilo--card__type__data.ilo--card__size__wide, .ilo--card__type__data.ilo--card__size__fluid {
1932
+ --max-width: 32.154340836rem;
1933
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
2236
1934
  }
2237
- .ilo--card--data .ilo--card--image--wrapper {
2238
- display: none;
1935
+ .ilo--card__type__data .ilo--card--image--wrapper {
2239
1936
  width: max(10.9860664523rem, 50%);
2240
1937
  }
2241
- .ilo--card--data .ilo--card--content .ilo--card--image--wrapper {
2242
- display: block;
2243
- }
2244
- .ilo--card--data--content-label {
1938
+ .ilo--card__type__data--content-label {
2245
1939
  font-size: 14.93px;
2246
1940
  letter-spacing: normal;
2247
1941
  line-height: 20.3px;
2248
1942
  margin-bottom: 0.6540478038rem;
2249
1943
  color: rgb(109, 109, 109);
2250
1944
  }
2251
- .ilo--card--data--content-copy {
1945
+ .ilo--card__type__data--content-copy {
2252
1946
  font-size: 23.32px;
2253
1947
  letter-spacing: -0.035em;
2254
1948
  line-height: 29.15px;
@@ -2257,175 +1951,161 @@ body {
2257
1951
  font-family: Overpass;
2258
1952
  font-weight: 500;
2259
1953
  }
2260
- .ilo--card--data--content-files {
1954
+ .ilo--card__type__data--content-files {
2261
1955
  margin-bottom: 2.1436227224rem;
2262
1956
  }
2263
- .ilo--card--data .ilo--link {
1957
+ .ilo--card__type__data .ilo--link {
2264
1958
  font-size: 18.66px;
2265
1959
  letter-spacing: -0.035em;
2266
1960
  line-height: 24.26px;
2267
1961
  }
2268
- .ilo--card--data--file {
1962
+ .ilo--card__type__data--file {
2269
1963
  margin: 0.2143622722rem 0.4287245445rem 0.2143622722rem 0;
2270
1964
  }
2271
- .ilo--card--data--file:last-of-type {
1965
+ .ilo--card__type__data--file:last-of-type {
2272
1966
  margin-right: 0;
2273
1967
  }
2274
- .ilo--card--feature {
2275
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2276
- display: flex;
2277
- margin-top: 0;
1968
+
1969
+ /**
1970
+ * Do not edit directly
1971
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1972
+ */
1973
+ /**
1974
+ * TOKENS:
1975
+ */
1976
+ /**
1977
+ * MAPS:
1978
+ */
1979
+ .ilo--card__type__stat {
1980
+ --max-width: 18.3815648446rem;
1981
+ border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
1982
+ padding: 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2278
1983
  position: relative;
1984
+ width: 100%;
1985
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2279
1986
  }
2280
- .ilo--card--feature::before {
2281
- display: none;
1987
+ .ilo--card__type__stat.ilo--card__color__blue {
1988
+ background: rgb(235, 245, 253);
2282
1989
  }
2283
- .ilo--card--feature.ilo--card--dark {
2284
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1990
+ .ilo--card__type__stat.ilo--card__color__yellow {
1991
+ background: rgb(255, 205, 45);
2285
1992
  }
2286
- .ilo--card--feature.ilo--card--dark .ilo--link-list {
2287
- border-top: 2px solid rgba(237, 240, 242, 0.25);
1993
+ .ilo--card__type__stat.ilo--card__color__green {
1994
+ background: rgb(140, 225, 100);
2288
1995
  }
2289
- .ilo--card--feature.ilo--card--dark .ilo--link-list--link {
2290
- color: rgb(255, 255, 255);
2291
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1996
+ .ilo--card__type__stat.ilo--card__color__turquoise {
1997
+ background: rgb(5, 210, 210);
2292
1998
  }
2293
- .ilo--card--feature.ilo--card--dark:hover .ilo--link-list--link, .ilo--card--feature.ilo--card--dark:focus .ilo--link-list--link, .ilo--card--feature.ilo--card--dark:focus-within .ilo--link-list--link {
2294
- color: rgb(30, 45, 190);
2295
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1999
+ .ilo--card__type__stat .ilo--card--content {
2000
+ display: flex;
2001
+ flex-wrap: wrap;
2002
+ height: 100%;
2296
2003
  }
2297
- .ilo--card--feature picture::before {
2298
- transition-property: opacity;
2299
- transition-duration: 150ms;
2300
- transition-timing-function: ease-out;
2004
+ .right-to-left .ilo--card__type__stat .ilo--card--content {
2005
+ flex-direction: row-reverse;
2301
2006
  }
2302
- .ilo--card--feature:hover, .ilo--card--feature:focus, .ilo--card--feature:focus-within {
2303
- background-color: rgb(255, 255, 255);
2304
- filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
2305
- border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
2007
+ .ilo--card__type__stat .ilo--card--title {
2008
+ color: rgb(35, 0, 80);
2009
+ font-size: 36.45px;
2010
+ letter-spacing: -0.035em;
2011
+ line-height: 43.74px;
2012
+ margin-bottom: 0.4278063594rem;
2013
+ width: 100%;
2306
2014
  }
2307
- .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before, .ilo--card--feature:focus-within picture::before {
2308
- opacity: 0.4;
2309
- z-index: 1;
2310
- transition-property: opacity;
2311
- transition-duration: 150ms;
2312
- transition-timing-function: ease-out;
2015
+ .ilo--card__type__stat .ilo--card--intro {
2016
+ color: rgb(35, 0, 80);
2017
+ font-family: Overpass;
2018
+ font-size: 18.66px;
2019
+ letter-spacing: normal;
2020
+ line-height: 27.24px;
2021
+ margin-bottom: 1.6734954235rem;
2022
+ width: 100%;
2313
2023
  }
2314
- .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image, .ilo--card--feature:focus-within .ilo--card--image {
2315
- filter: saturate(0);
2024
+ .ilo--card__type__stat .ilo--link {
2025
+ font-size: 11.94px;
2026
+ letter-spacing: -0.02em;
2027
+ line-height: 16.24px;
2028
+ align-self: flex-end;
2316
2029
  }
2317
- .ilo--card--feature .ilo--link-list {
2318
- border-top: 0.1071811361rem solid rgb(237, 240, 242);
2319
- margin-left: -1.2861736334rem;
2320
- margin-right: -1.2861736334rem;
2321
- margin-top: 1.822079314rem;
2322
- position: relative;
2323
- z-index: 2;
2030
+
2031
+ /**
2032
+ * Do not edit directly
2033
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2034
+ */
2035
+ /**
2036
+ * TOKENS:
2037
+ */
2038
+ /**
2039
+ * MAPS:
2040
+ */
2041
+ .ilo--card__type__factlist {
2042
+ --max-width: 20.0964630225rem;
2043
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2044
+ padding: 1.2861736334rem 2.5723472669rem;
2045
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2324
2046
  }
2325
- .ilo--card--feature .ilo--link-list--link, .ilo--card--feature .ilo--link-list--link:hover {
2326
- border-bottom: none;
2327
- padding-left: 1.2861736334rem;
2328
- padding-right: 1.2861736334rem;
2047
+ @media screen and (min-width: 1024px) {
2048
+ .ilo--card__type__factlist {
2049
+ padding: 2.1436227224rem 3.0010718114rem;
2050
+ }
2329
2051
  }
2330
- .ilo--card--feature.ilo--card--narrow .ilo--card--wrap, .ilo--card--feature.ilo--card--standard .ilo--card--wrap {
2331
- display: flex;
2332
- flex-wrap: wrap;
2333
- width: 100%;
2052
+ .ilo--card__type__factlist.ilo--card__size__wide {
2053
+ --max-width: 45.8735262594rem;
2054
+ padding: 2.1436227224rem 2.7867095391rem;
2334
2055
  }
2335
- .ilo--card--feature.ilo--card--narrow .ilo--card--content, .ilo--card--feature.ilo--card--standard .ilo--card--content {
2336
- width: 100%;
2056
+ @media screen and (min-width: 610px) {
2057
+ .ilo--card__type__factlist.ilo--card__size__wide {
2058
+ padding: 2.1436227224rem 3.2154340836rem;
2059
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
2060
+ }
2337
2061
  }
2338
- .ilo--card--feature.ilo--card--narrow .ilo--card--image--wrapper, .ilo--card--feature.ilo--card--standard .ilo--card--image--wrapper {
2339
- width: 100%;
2062
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2063
+ --max-width: 20.0964630225rem;
2064
+ padding: 1.2861736334rem 2.5723472669rem;
2065
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2340
2066
  }
2341
2067
  @media screen and (min-width: 610px) {
2342
- .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2343
- flex-direction: row;
2344
- }
2345
- .right-to-left .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2346
- flex-direction: row-reverse;
2347
- }
2348
- .ilo--card--feature.ilo--card--wide .ilo--card--content {
2349
- display: flex;
2350
- flex-direction: row;
2351
- flex-wrap: wrap;
2352
- position: relative;
2353
- width: 50%;
2354
- }
2355
- .ilo--card--feature.ilo--card--wide .ilo--card--image--wrapper {
2356
- width: 50%;
2357
- }
2358
- .ilo--card--feature.ilo--card--wide .ilo--card--image {
2359
- object-fit: cover;
2360
- }
2361
- .ilo--card--feature.ilo--card--wide .ilo--card--date {
2362
- align-self: flex-end;
2363
- width: 100%;
2364
- }
2365
- .ilo--card--feature.ilo--card--wide .ilo--card--eyebrow {
2366
- width: 100%;
2367
- }
2368
- .ilo--card--feature.ilo--card--wide .ilo--card--title {
2369
- width: 100%;
2370
- }
2371
- .ilo--card--feature.ilo--card--wide .ilo--link-list {
2372
- width: calc(100% + 48px);
2068
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2069
+ padding: 1.2861736334rem 2.5723472669rem;
2373
2070
  }
2374
2071
  }
2375
- .ilo--card--feature .ilo--card--wrap {
2376
- display: flex;
2377
- flex-direction: column;
2378
- width: 100%;
2072
+ .ilo--card__type__factlist.ilo--card__theme__dark {
2073
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2379
2074
  }
2380
- .ilo--card--feature picture {
2381
- display: flex;
2382
- height: 100%;
2383
- position: relative;
2075
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--card--title {
2076
+ color: rgb(255, 255, 255);
2384
2077
  }
2385
- .ilo--card--feature picture::before {
2386
- background-color: rgb(30, 45, 190);
2387
- content: "";
2388
- display: block;
2389
- height: 100%;
2390
- left: 0;
2391
- opacity: 0;
2392
- position: absolute;
2393
- top: 0;
2394
- transition: opacity 150ms ease-in-out;
2395
- width: 100%;
2396
- z-index: -1;
2078
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item {
2079
+ color: rgb(255, 255, 255);
2397
2080
  }
2398
- .ilo--card--feature .ilo--card--content {
2399
- display: flex;
2400
- flex: 1 1 auto;
2401
- flex-direction: column;
2402
- padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
2081
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item:last-of-type {
2082
+ margin-bottom: 0;
2403
2083
  }
2404
- .ilo--card--feature.ilo--card--linklist .ilo--card--content {
2405
- padding-bottom: 0;
2084
+ .ilo--card__type__factlist.ilo--card__theme__dark:hover .ilo--card--title, .ilo--card__type__factlist.ilo--card__theme__dark:focus .ilo--card--title, .ilo--card__type__factlist.ilo--card__theme__dark:focus-within .ilo--card--title {
2085
+ color: rgb(255, 255, 255);
2406
2086
  }
2407
- .ilo--card--feature .ilo--card--title {
2087
+ .ilo--card__type__factlist.ilo--card__theme__dark:hover .ilo--list__item, .ilo--card__type__factlist.ilo--card__theme__dark:focus .ilo--list__item, .ilo--card__type__factlist.ilo--card__theme__dark:focus-within .ilo--list__item {
2088
+ color: rgb(255, 255, 255);
2089
+ }
2090
+ .ilo--card__type__factlist .ilo--card--title {
2091
+ color: rgb(45, 45, 45);
2408
2092
  font-size: 23.32px;
2409
2093
  letter-spacing: -0.035em;
2410
2094
  line-height: 29.15px;
2411
- margin-bottom: 1.5763397642rem;
2412
- font-family: Overpass;
2413
- font-weight: 700;
2414
- }
2415
- .ilo--card--feature .ilo--card--eyebrow {
2416
- font-size: 14.93px;
2417
- letter-spacing: normal;
2418
- line-height: 19.71px;
2419
- margin-bottom: 0.3376482577rem;
2095
+ margin-bottom: 1.1476152197rem;
2420
2096
  }
2421
- .ilo--card--feature .ilo--card--date {
2422
- margin-bottom: 0;
2423
- margin-top: auto;
2097
+ @media screen and (min-width: 1024px) {
2098
+ .ilo--card__type__factlist .ilo--card--title {
2099
+ font-size: 29.16px;
2100
+ letter-spacing: -0.035em;
2101
+ line-height: 36.45px;
2102
+ margin-bottom: 1.4315916399rem;
2103
+ }
2424
2104
  }
2425
2105
 
2426
2106
  /**
2427
2107
  * Do not edit directly
2428
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2108
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2429
2109
  */
2430
2110
  /**
2431
2111
  * TOKENS:
@@ -2433,34 +2113,29 @@ body {
2433
2113
  /**
2434
2114
  * MAPS:
2435
2115
  */
2116
+ .ilo--cardgroup__collapsed .ilo--cardgroup--inner {
2117
+ gap: 0;
2118
+ }
2119
+ .ilo--cardgroup__justify__start .ilo--cardgroup--inner {
2120
+ justify-content: flex-start;
2121
+ }
2122
+ .ilo--cardgroup__justify__between .ilo--cardgroup--inner {
2123
+ justify-content: space-between;
2124
+ }
2125
+ .ilo--cardgroup__justify__center .ilo--cardgroup--inner {
2126
+ justify-content: center;
2127
+ }
2436
2128
  .ilo--cardgroup--inner {
2437
2129
  display: flex;
2438
- flex-wrap: wrap;
2439
- justify-content: space-between;
2130
+ flex-flow: row wrap;
2131
+ justify-content: center;
2440
2132
  margin: auto;
2441
- row-gap: 1.7148981779rem;
2133
+ gap: 1.7148981779rem;
2134
+ width: 100%;
2442
2135
  }
2443
2136
  .right-to-left .ilo--cardgroup--inner {
2444
2137
  flex-direction: row-reverse;
2445
2138
  }
2446
- .ilo--cardgroup--inner .ilo--card {
2447
- width: 100%;
2448
- }
2449
- @media screen and (min-width: 1024px) {
2450
- .ilo--cardgroup--two .ilo--card {
2451
- width: calc(50% - 24px);
2452
- }
2453
- }
2454
- @media screen and (min-width: 1024px) {
2455
- .ilo--cardgroup--three .ilo--card {
2456
- width: calc(33.333% - 24px);
2457
- }
2458
- }
2459
- @media screen and (min-width: 1024px) {
2460
- .ilo--cardgroup--four .ilo--card {
2461
- width: calc(25% - 24px);
2462
- }
2463
- }
2464
2139
  .ilo--cardgroup--button-wrap {
2465
2140
  display: flex;
2466
2141
  justify-content: center;
@@ -2470,7 +2145,7 @@ body {
2470
2145
 
2471
2146
  /**
2472
2147
  * Do not edit directly
2473
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2148
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2474
2149
  */
2475
2150
  /**
2476
2151
  * TOKENS:
@@ -2575,7 +2250,7 @@ body {
2575
2250
 
2576
2251
  /**
2577
2252
  * Do not edit directly
2578
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2253
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2579
2254
  */
2580
2255
  /**
2581
2256
  * TOKENS:
@@ -2656,7 +2331,7 @@ body {
2656
2331
 
2657
2332
  /**
2658
2333
  * Do not edit directly
2659
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2334
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2660
2335
  */
2661
2336
  /**
2662
2337
  * TOKENS:
@@ -2666,7 +2341,7 @@ body {
2666
2341
  */
2667
2342
  /**
2668
2343
  * Do not edit directly
2669
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2344
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2670
2345
  */
2671
2346
  /**
2672
2347
  * TOKENS:
@@ -2676,7 +2351,7 @@ body {
2676
2351
  */
2677
2352
  /**
2678
2353
  * Do not edit directly
2679
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2354
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2680
2355
  */
2681
2356
  /**
2682
2357
  * TOKENS:
@@ -2686,7 +2361,7 @@ body {
2686
2361
  */
2687
2362
  /**
2688
2363
  * Do not edit directly
2689
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2364
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2690
2365
  */
2691
2366
  /**
2692
2367
  * TOKENS:
@@ -2812,7 +2487,7 @@ body {
2812
2487
 
2813
2488
  /**
2814
2489
  * Do not edit directly
2815
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2490
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2816
2491
  */
2817
2492
  /**
2818
2493
  * TOKENS:
@@ -2840,7 +2515,7 @@ body {
2840
2515
 
2841
2516
  /**
2842
2517
  * Do not edit directly
2843
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2518
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2844
2519
  */
2845
2520
  /**
2846
2521
  * TOKENS:
@@ -2928,7 +2603,7 @@ body {
2928
2603
 
2929
2604
  /**
2930
2605
  * Do not edit directly
2931
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2606
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2932
2607
  */
2933
2608
  /**
2934
2609
  * TOKENS:
@@ -2938,7 +2613,7 @@ body {
2938
2613
  */
2939
2614
  /**
2940
2615
  * Do not edit directly
2941
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2616
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2942
2617
  */
2943
2618
  /**
2944
2619
  * TOKENS:
@@ -2948,7 +2623,7 @@ body {
2948
2623
  */
2949
2624
  /**
2950
2625
  * Do not edit directly
2951
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2626
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2952
2627
  */
2953
2628
  /**
2954
2629
  * TOKENS:
@@ -3001,7 +2676,7 @@ body {
3001
2676
 
3002
2677
  /**
3003
2678
  * Do not edit directly
3004
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2679
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3005
2680
  */
3006
2681
  /**
3007
2682
  * TOKENS:
@@ -3076,7 +2751,7 @@ body {
3076
2751
 
3077
2752
  /**
3078
2753
  * Do not edit directly
3079
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2754
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3080
2755
  */
3081
2756
  /**
3082
2757
  * TOKENS:
@@ -3182,7 +2857,7 @@ body {
3182
2857
 
3183
2858
  /**
3184
2859
  * Do not edit directly
3185
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2860
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3186
2861
  */
3187
2862
  /**
3188
2863
  * TOKENS:
@@ -3205,7 +2880,7 @@ body {
3205
2880
 
3206
2881
  /**
3207
2882
  * Do not edit directly
3208
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2883
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3209
2884
  */
3210
2885
  /**
3211
2886
  * TOKENS:
@@ -3219,7 +2894,7 @@ body {
3219
2894
 
3220
2895
  /**
3221
2896
  * Do not edit directly
3222
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2897
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3223
2898
  */
3224
2899
  /**
3225
2900
  * TOKENS:
@@ -3229,7 +2904,7 @@ body {
3229
2904
  */
3230
2905
  /**
3231
2906
  * Do not edit directly
3232
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2907
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3233
2908
  */
3234
2909
  /**
3235
2910
  * TOKENS:
@@ -3254,7 +2929,7 @@ body {
3254
2929
  }
3255
2930
  /**
3256
2931
  * Do not edit directly
3257
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2932
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3258
2933
  */
3259
2934
  /**
3260
2935
  * TOKENS:
@@ -3578,7 +3253,7 @@ body {
3578
3253
 
3579
3254
  /**
3580
3255
  * Do not edit directly
3581
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3256
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3582
3257
  */
3583
3258
  /**
3584
3259
  * TOKENS:
@@ -3701,7 +3376,7 @@ body {
3701
3376
 
3702
3377
  /**
3703
3378
  * Do not edit directly
3704
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3379
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3705
3380
  */
3706
3381
  /**
3707
3382
  * TOKENS:
@@ -3907,7 +3582,7 @@ body {
3907
3582
 
3908
3583
  /**
3909
3584
  * Do not edit directly
3910
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3585
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3911
3586
  */
3912
3587
  /**
3913
3588
  * TOKENS:
@@ -3918,7 +3593,7 @@ body {
3918
3593
  .ilo--hero-card {
3919
3594
  height: 100%;
3920
3595
  position: relative;
3921
- padding: 39px 16px;
3596
+ padding: 40px 16px;
3922
3597
  }
3923
3598
  @media screen and (min-width: 1024px) {
3924
3599
  .ilo--hero-card {
@@ -3963,12 +3638,7 @@ body {
3963
3638
  }
3964
3639
  }
3965
3640
  .ilo--hero-card__cornercut {
3966
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 39px, 100% 100%, 0 100%);
3967
- }
3968
- @media screen and (min-width: 1024px) {
3969
- .ilo--hero-card__cornercut {
3970
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
3971
- }
3641
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
3972
3642
  }
3973
3643
  .ilo--hero-card--datecopy {
3974
3644
  font-size: 16px;
@@ -4033,7 +3703,7 @@ body {
4033
3703
 
4034
3704
  /**
4035
3705
  * Do not edit directly
4036
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3706
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4037
3707
  */
4038
3708
  /**
4039
3709
  * TOKENS:
@@ -4089,7 +3759,7 @@ body {
4089
3759
 
4090
3760
  /**
4091
3761
  * Do not edit directly
4092
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3762
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4093
3763
  */
4094
3764
  /**
4095
3765
  * TOKENS:
@@ -4231,7 +3901,7 @@ body {
4231
3901
 
4232
3902
  /**
4233
3903
  * Do not edit directly
4234
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3904
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4235
3905
  */
4236
3906
  /**
4237
3907
  * TOKENS:
@@ -4241,7 +3911,7 @@ body {
4241
3911
  */
4242
3912
  /**
4243
3913
  * Do not edit directly
4244
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3914
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4245
3915
  */
4246
3916
  /**
4247
3917
  * TOKENS:
@@ -4266,7 +3936,7 @@ body {
4266
3936
  }
4267
3937
  /**
4268
3938
  * Do not edit directly
4269
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3939
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4270
3940
  */
4271
3941
  /**
4272
3942
  * TOKENS:
@@ -4424,7 +4094,7 @@ body {
4424
4094
 
4425
4095
  /**
4426
4096
  * Do not edit directly
4427
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4097
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4428
4098
  */
4429
4099
  /**
4430
4100
  * TOKENS:
@@ -4519,7 +4189,7 @@ body {
4519
4189
 
4520
4190
  /**
4521
4191
  * Do not edit directly
4522
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4192
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4523
4193
  */
4524
4194
  /**
4525
4195
  * TOKENS:
@@ -4529,7 +4199,7 @@ body {
4529
4199
  */
4530
4200
  /**
4531
4201
  * Do not edit directly
4532
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4202
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4533
4203
  */
4534
4204
  /**
4535
4205
  * TOKENS:
@@ -4539,7 +4209,7 @@ body {
4539
4209
  */
4540
4210
  /**
4541
4211
  * Do not edit directly
4542
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4212
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4543
4213
  */
4544
4214
  /**
4545
4215
  * TOKENS:
@@ -4710,7 +4380,54 @@ body {
4710
4380
 
4711
4381
  /**
4712
4382
  * Do not edit directly
4713
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4383
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4384
+ */
4385
+ /**
4386
+ * TOKENS:
4387
+ */
4388
+ /**
4389
+ * MAPS:
4390
+ */
4391
+ .ilo--logo-grid--logos {
4392
+ display: flex;
4393
+ flex-flow: row wrap;
4394
+ grid-gap: 0.857449089rem;
4395
+ }
4396
+ .ilo--logo-grid--link {
4397
+ text-decoration: none;
4398
+ transition: background-color 0.2s ease-in-out;
4399
+ }
4400
+ .ilo--logo-grid__theme__light .ilo--logo-grid--link:hover, .ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover {
4401
+ background-color: rgb(235, 245, 253);
4402
+ }
4403
+ .ilo--logo-grid--item {
4404
+ display: flex;
4405
+ align-items: center;
4406
+ justify-content: center;
4407
+ height: 7.18113612rem;
4408
+ flex: 100%;
4409
+ }
4410
+ @media screen and (min-width: 414px) {
4411
+ .ilo--logo-grid--item {
4412
+ flex: 0 0 12.7545551983rem;
4413
+ }
4414
+ }
4415
+ .ilo--logo-grid__theme__light .ilo--logo-grid--item {
4416
+ background-color: rgb(237, 240, 242);
4417
+ }
4418
+ .ilo--logo-grid__theme__dark .ilo--logo-grid--item {
4419
+ background-color: rgb(255, 255, 255);
4420
+ }
4421
+ .ilo--logo-grid--item img {
4422
+ width: auto;
4423
+ height: auto;
4424
+ max-width: 8.038585209rem;
4425
+ max-height: 2.679528403rem;
4426
+ }
4427
+
4428
+ /**
4429
+ * Do not edit directly
4430
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4714
4431
  */
4715
4432
  /**
4716
4433
  * TOKENS:
@@ -4720,7 +4437,7 @@ body {
4720
4437
  */
4721
4438
  /**
4722
4439
  * Do not edit directly
4723
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4440
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4724
4441
  */
4725
4442
  /**
4726
4443
  * TOKENS:
@@ -4730,7 +4447,7 @@ body {
4730
4447
  */
4731
4448
  /**
4732
4449
  * Do not edit directly
4733
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4450
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4734
4451
  */
4735
4452
  /**
4736
4453
  * TOKENS:
@@ -4827,7 +4544,7 @@ body {
4827
4544
 
4828
4545
  /**
4829
4546
  * Do not edit directly
4830
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4547
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4831
4548
  */
4832
4549
  /**
4833
4550
  * TOKENS:
@@ -5717,7 +5434,7 @@ body {
5717
5434
 
5718
5435
  /**
5719
5436
  * Do not edit directly
5720
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5437
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5721
5438
  */
5722
5439
  /**
5723
5440
  * TOKENS:
@@ -5727,7 +5444,7 @@ body {
5727
5444
  */
5728
5445
  /**
5729
5446
  * Do not edit directly
5730
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5447
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5731
5448
  */
5732
5449
  /**
5733
5450
  * TOKENS:
@@ -5737,7 +5454,7 @@ body {
5737
5454
  */
5738
5455
  /**
5739
5456
  * Do not edit directly
5740
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5457
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5741
5458
  */
5742
5459
  /**
5743
5460
  * TOKENS:
@@ -5929,7 +5646,7 @@ body {
5929
5646
 
5930
5647
  /**
5931
5648
  * Do not edit directly
5932
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5649
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5933
5650
  */
5934
5651
  /**
5935
5652
  * TOKENS:
@@ -6069,7 +5786,7 @@ body {
6069
5786
 
6070
5787
  /**
6071
5788
  * Do not edit directly
6072
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5789
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6073
5790
  */
6074
5791
  /**
6075
5792
  * TOKENS:
@@ -6079,7 +5796,7 @@ body {
6079
5796
  */
6080
5797
  /**
6081
5798
  * Do not edit directly
6082
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5799
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6083
5800
  */
6084
5801
  /**
6085
5802
  * TOKENS:
@@ -6104,7 +5821,7 @@ body {
6104
5821
  }
6105
5822
  /**
6106
5823
  * Do not edit directly
6107
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5824
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6108
5825
  */
6109
5826
  /**
6110
5827
  * TOKENS:
@@ -6271,7 +5988,7 @@ body {
6271
5988
 
6272
5989
  /**
6273
5990
  * Do not edit directly
6274
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5991
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6275
5992
  */
6276
5993
  /**
6277
5994
  * TOKENS:
@@ -6378,7 +6095,7 @@ body {
6378
6095
 
6379
6096
  /**
6380
6097
  * Do not edit directly
6381
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6098
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6382
6099
  */
6383
6100
  /**
6384
6101
  * TOKENS:
@@ -6388,7 +6105,7 @@ body {
6388
6105
  */
6389
6106
  /**
6390
6107
  * Do not edit directly
6391
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6108
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6392
6109
  */
6393
6110
  /**
6394
6111
  * TOKENS:
@@ -6413,7 +6130,7 @@ body {
6413
6130
  }
6414
6131
  /**
6415
6132
  * Do not edit directly
6416
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6133
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6417
6134
  */
6418
6135
  /**
6419
6136
  * TOKENS:
@@ -6474,7 +6191,7 @@ body {
6474
6191
 
6475
6192
  /**
6476
6193
  * Do not edit directly
6477
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6194
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6478
6195
  */
6479
6196
  /**
6480
6197
  * TOKENS:
@@ -6889,7 +6606,7 @@ body {
6889
6606
 
6890
6607
  /**
6891
6608
  * Do not edit directly
6892
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6609
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6893
6610
  */
6894
6611
  /**
6895
6612
  * TOKENS:
@@ -6943,7 +6660,7 @@ body {
6943
6660
 
6944
6661
  /**
6945
6662
  * Do not edit directly
6946
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6663
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6947
6664
  */
6948
6665
  /**
6949
6666
  * TOKENS:
@@ -7101,7 +6818,7 @@ body {
7101
6818
 
7102
6819
  /**
7103
6820
  * Do not edit directly
7104
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6821
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7105
6822
  */
7106
6823
  /**
7107
6824
  * TOKENS:
@@ -7452,7 +7169,7 @@ body {
7452
7169
 
7453
7170
  /**
7454
7171
  * Do not edit directly
7455
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7172
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7456
7173
  */
7457
7174
  /**
7458
7175
  * TOKENS:
@@ -7638,7 +7355,7 @@ body {
7638
7355
 
7639
7356
  /**
7640
7357
  * Do not edit directly
7641
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7358
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7642
7359
  */
7643
7360
  /**
7644
7361
  * TOKENS:
@@ -7696,7 +7413,7 @@ body {
7696
7413
 
7697
7414
  /**
7698
7415
  * Do not edit directly
7699
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7416
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7700
7417
  */
7701
7418
  /**
7702
7419
  * TOKENS:
@@ -7870,7 +7587,7 @@ body {
7870
7587
 
7871
7588
  /**
7872
7589
  * Do not edit directly
7873
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7590
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7874
7591
  */
7875
7592
  /**
7876
7593
  * TOKENS:
@@ -8045,7 +7762,7 @@ body {
8045
7762
 
8046
7763
  /**
8047
7764
  * Do not edit directly
8048
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7765
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8049
7766
  */
8050
7767
  /**
8051
7768
  * TOKENS:
@@ -8955,7 +8672,7 @@ body {
8955
8672
 
8956
8673
  /**
8957
8674
  * Do not edit directly
8958
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
8675
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8959
8676
  */
8960
8677
  /**
8961
8678
  * TOKENS:
@@ -8965,7 +8682,7 @@ body {
8965
8682
  */
8966
8683
  /**
8967
8684
  * Do not edit directly
8968
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
8685
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8969
8686
  */
8970
8687
  /**
8971
8688
  * TOKENS:
@@ -8990,7 +8707,7 @@ body {
8990
8707
  }
8991
8708
  /**
8992
8709
  * Do not edit directly
8993
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
8710
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8994
8711
  */
8995
8712
  /**
8996
8713
  * TOKENS: