@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/monorepo.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:
@@ -250,7 +250,7 @@ body {
250
250
 
251
251
  /**
252
252
  * Do not edit directly
253
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
253
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
254
254
  */
255
255
  /**
256
256
  * TOKENS:
@@ -326,6 +326,7 @@ body {
326
326
  --height: auto;
327
327
  color: rgb(109, 109, 109);
328
328
  font-family: Noto Sans;
329
+ position: relative;
329
330
  height: 0px;
330
331
  overflow: hidden;
331
332
  transition: height 225ms ease-out, padding 225ms ease-out;
@@ -341,6 +342,11 @@ body {
341
342
  height: var(--height);
342
343
  transition: height 225ms ease-out, padding 225ms ease-out;
343
344
  }
345
+ .ilo--accordion--panel__scroll {
346
+ max-height: 500px;
347
+ overflow-y: auto;
348
+ padding-right: 1.7148981779rem;
349
+ }
344
350
  .ilo--accordion--panel.collapsing, .ilo--accordion--panel.expanding {
345
351
  height: 0;
346
352
  position: relative;
@@ -363,7 +369,7 @@ body {
363
369
 
364
370
  /**
365
371
  * Do not edit directly
366
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
372
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
367
373
  */
368
374
  /**
369
375
  * TOKENS:
@@ -388,7 +394,7 @@ body {
388
394
  }
389
395
  /**
390
396
  * Do not edit directly
391
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
397
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
392
398
  */
393
399
  /**
394
400
  * TOKENS:
@@ -642,7 +648,7 @@ body {
642
648
 
643
649
  /**
644
650
  * Do not edit directly
645
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
651
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
646
652
  */
647
653
  /**
648
654
  * TOKENS:
@@ -652,7 +658,7 @@ body {
652
658
  */
653
659
  /**
654
660
  * Do not edit directly
655
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
661
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
656
662
  */
657
663
  /**
658
664
  * TOKENS:
@@ -677,7 +683,7 @@ body {
677
683
  }
678
684
  /**
679
685
  * Do not edit directly
680
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
686
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
681
687
  */
682
688
  /**
683
689
  * TOKENS:
@@ -967,7 +973,7 @@ body {
967
973
 
968
974
  /**
969
975
  * Do not edit directly
970
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
976
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
971
977
  */
972
978
  /**
973
979
  * TOKENS:
@@ -1097,7 +1103,7 @@ body {
1097
1103
 
1098
1104
  /**
1099
1105
  * Do not edit directly
1100
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
1106
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1101
1107
  */
1102
1108
  /**
1103
1109
  * TOKENS:
@@ -1106,38 +1112,75 @@ body {
1106
1112
  * MAPS:
1107
1113
  */
1108
1114
  .ilo--card {
1109
- margin: 0;
1110
- max-width: 49.3033226152rem;
1115
+ box-sizing: border-box;
1116
+ position: relative;
1117
+ max-width: var(--max-width);
1118
+ flex: 1 1 var(--max-width);
1119
+ }
1120
+ .ilo--card__size__fluid {
1121
+ --max-width: 100% !important;
1111
1122
  }
1112
1123
  .right-to-left .ilo--card {
1113
1124
  text-align: right;
1114
1125
  }
1115
- .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) {
1126
+ .ilo--card__action:hover, .ilo--card__action:focus, .ilo--card__action:focus-within {
1116
1127
  background: rgb(255, 255, 255);
1117
- color: rgb(30, 45, 190);
1118
1128
  outline: none;
1119
1129
  text-decoration: none;
1120
1130
  }
1121
- .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) {
1131
+ .ilo--card__action:hover.ilo--card__dark, .ilo--card__action:focus.ilo--card__dark, .ilo--card__action:focus-within.ilo--card__dark {
1122
1132
  background: rgb(255, 255, 255);
1123
1133
  }
1124
- .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 {
1125
- 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");
1126
- }
1127
- .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 {
1134
+ .ilo--card__action:hover .ilo--card--eyebrow,
1135
+ .ilo--card__action:hover .ilo--card--title,
1136
+ .ilo--card__action:hover .ilo--card--intro,
1137
+ .ilo--card__action:hover .ilo--card--date,
1138
+ .ilo--card__action:hover .ilo--card--date-extra, .ilo--card__action:focus .ilo--card--eyebrow,
1139
+ .ilo--card__action:focus .ilo--card--title,
1140
+ .ilo--card__action:focus .ilo--card--intro,
1141
+ .ilo--card__action:focus .ilo--card--date,
1142
+ .ilo--card__action:focus .ilo--card--date-extra, .ilo--card__action:focus-within .ilo--card--eyebrow,
1143
+ .ilo--card__action:focus-within .ilo--card--title,
1144
+ .ilo--card__action:focus-within .ilo--card--intro,
1145
+ .ilo--card__action:focus-within .ilo--card--date,
1146
+ .ilo--card__action:focus-within .ilo--card--date-extra {
1128
1147
  color: rgb(30, 45, 190);
1129
1148
  }
1130
- .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 {
1131
- color: rgb(30, 45, 190);
1149
+ .ilo--card__theme__light {
1150
+ background: rgb(255, 255, 255);
1132
1151
  }
1133
- .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 {
1134
- color: rgb(30, 45, 190);
1152
+ .ilo--card__theme__dark {
1153
+ background: rgb(35, 0, 80);
1154
+ transition: background 150ms ease-out;
1135
1155
  }
1136
- .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 {
1137
- color: rgb(30, 45, 190);
1156
+ .ilo--card__theme__dark .ilo--card--eyebrow,
1157
+ .ilo--card__theme__dark .ilo--card--title,
1158
+ .ilo--card__theme__dark .ilo--card--intro,
1159
+ .ilo--card__theme__dark .ilo--card--date,
1160
+ .ilo--card__theme__dark .ilo--card--eventdate {
1161
+ color: rgb(237, 240, 242);
1162
+ transition: color 150ms ease-out;
1138
1163
  }
1139
- .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 {
1140
- color: rgb(30, 45, 190);
1164
+ .ilo--card__isvideo .ilo--card--image--wrapper {
1165
+ position: relative;
1166
+ }
1167
+ .ilo--card__isvideo .ilo--card--image--wrapper::before {
1168
+ 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");
1169
+ background-color: rgb(45, 45, 45);
1170
+ background-position: center;
1171
+ background-size: 18px 20px;
1172
+ background-repeat: no-repeat;
1173
+ content: "";
1174
+ display: block;
1175
+ height: 40px;
1176
+ left: 0;
1177
+ position: absolute;
1178
+ top: 0;
1179
+ width: 40px;
1180
+ z-index: 1;
1181
+ }
1182
+ .ilo--card--wrapper:hover, .ilo--card--wrapper:focus, .ilo--card--wrapper:focus-within {
1183
+ 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));
1141
1184
  }
1142
1185
  .ilo--card--link {
1143
1186
  background: none;
@@ -1159,6 +1202,21 @@ body {
1159
1202
  transition-duration: 150ms;
1160
1203
  transition-timing-function: ease-out;
1161
1204
  }
1205
+ .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 {
1206
+ color: rgb(30, 45, 190);
1207
+ }
1208
+ .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 {
1209
+ color: rgb(30, 45, 190);
1210
+ }
1211
+ .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 {
1212
+ color: rgb(30, 45, 190);
1213
+ }
1214
+ .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 {
1215
+ color: rgb(30, 45, 190);
1216
+ }
1217
+ .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 {
1218
+ color: rgb(30, 45, 190);
1219
+ }
1162
1220
  .ilo--card--link--text {
1163
1221
  width: 1px;
1164
1222
  height: 1px;
@@ -1169,176 +1227,6 @@ body {
1169
1227
  clip: rect(0 0 0 0);
1170
1228
  overflow: hidden;
1171
1229
  }
1172
- .ilo--card--light {
1173
- background: rgb(255, 255, 255);
1174
- }
1175
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) {
1176
- background: rgb(35, 0, 80);
1177
- outline: none;
1178
- transition: background 150ms ease-out;
1179
- }
1180
- .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 {
1181
- color: rgb(237, 240, 242);
1182
- transition: color 150ms ease-out;
1183
- }
1184
- .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 {
1185
- color: rgb(255, 255, 255);
1186
- transition: color 150ms ease-out;
1187
- }
1188
- .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 {
1189
- color: rgb(237, 240, 242);
1190
- transition: color 150ms ease-out;
1191
- }
1192
- .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 {
1193
- color: rgb(237, 240, 242);
1194
- transition: color 150ms ease-out;
1195
- }
1196
- .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 {
1197
- color: rgb(237, 240, 242);
1198
- transition: color 150ms ease-out;
1199
- }
1200
- .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 {
1201
- background: rgb(35, 0, 80);
1202
- outline: none;
1203
- transition: background 150ms ease-out;
1204
- }
1205
- .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 {
1206
- color: rgb(237, 240, 242);
1207
- transition: color 150ms ease-out;
1208
- }
1209
- .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 {
1210
- color: rgb(255, 255, 255);
1211
- transition: color 150ms ease-out;
1212
- }
1213
- .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 {
1214
- color: rgb(237, 240, 242);
1215
- transition: color 150ms ease-out;
1216
- }
1217
- .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 {
1218
- color: rgb(237, 240, 242);
1219
- transition: color 150ms ease-out;
1220
- }
1221
- .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 {
1222
- color: rgb(237, 240, 242);
1223
- transition: color 150ms ease-out;
1224
- }
1225
- .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) {
1226
- margin-top: 2.1436227224rem;
1227
- padding-top: 0;
1228
- position: relative;
1229
- }
1230
- .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 {
1231
- background: inherit;
1232
- content: "";
1233
- display: block;
1234
- height: 40px;
1235
- position: absolute;
1236
- width: calc(100% - 73px);
1237
- }
1238
- .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 {
1239
- 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");
1240
- background-position: bottom right;
1241
- background-size: cover;
1242
- content: "";
1243
- height: 40px;
1244
- display: block;
1245
- position: absolute;
1246
- width: 73.4px;
1247
- }
1248
- .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 {
1249
- 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");
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) {
1253
- margin-top: 2.5723472669rem;
1254
- }
1255
- .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 {
1256
- background: inherit;
1257
- content: "";
1258
- display: block;
1259
- height: 48px;
1260
- position: absolute;
1261
- width: calc(100% - 87px);
1262
- }
1263
- .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 {
1264
- 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");
1265
- background-position: bottom right;
1266
- background-size: cover;
1267
- content: "";
1268
- height: 48px;
1269
- display: block;
1270
- position: absolute;
1271
- width: 87.4px;
1272
- }
1273
- .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 {
1274
- 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");
1275
- }
1276
- }
1277
- @media screen and (min-width: 1024px) {
1278
- .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) {
1279
- margin-top: 3.4297963558rem;
1280
- }
1281
- .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 {
1282
- background: inherit;
1283
- content: "";
1284
- display: block;
1285
- height: 64px;
1286
- position: absolute;
1287
- width: calc(100% - 116px);
1288
- }
1289
- .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 {
1290
- 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");
1291
- background-position: bottom right;
1292
- background-size: cover;
1293
- content: "";
1294
- height: 64px;
1295
- display: block;
1296
- position: absolute;
1297
- width: 116.4px;
1298
- }
1299
- .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 {
1300
- 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");
1301
- }
1302
- }
1303
- .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 {
1304
- left: 0;
1305
- top: -2.1436227224rem;
1306
- transition: background-image 150ms ease-out;
1307
- }
1308
- .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 {
1309
- left: auto;
1310
- right: 0;
1311
- }
1312
- @media screen and (min-width: 610px) {
1313
- .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 {
1314
- top: -2.5562700965rem;
1315
- }
1316
- }
1317
- @media screen and (min-width: 1024px) {
1318
- .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 {
1319
- top: -3.4137191854rem;
1320
- }
1321
- }
1322
- .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 {
1323
- right: 0;
1324
- top: -2.1436227224rem;
1325
- transition: background-image 150ms ease-out;
1326
- }
1327
- .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 {
1328
- left: 0;
1329
- right: auto;
1330
- transform: rotateY(180deg);
1331
- }
1332
- @media screen and (min-width: 610px) {
1333
- .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 {
1334
- top: -2.5562700965rem;
1335
- }
1336
- }
1337
- @media screen and (min-width: 1024px) {
1338
- .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 {
1339
- top: -3.4137191854rem;
1340
- }
1341
- }
1342
1230
  .ilo--card--eyebrow {
1343
1231
  color: rgb(150, 10, 85);
1344
1232
  font-size: 16px;
@@ -1411,7 +1299,7 @@ body {
1411
1299
  line-height: 23.36px;
1412
1300
  margin-bottom: 1.3742266073rem;
1413
1301
  }
1414
- .ilo--card--image {
1302
+ .ilo--card--picture {
1415
1303
  max-width: 100%;
1416
1304
  width: 100%;
1417
1305
  }
@@ -1419,190 +1307,131 @@ body {
1419
1307
  position: relative;
1420
1308
  z-index: 2;
1421
1309
  }
1422
- .ilo--card--isvideo .ilo--card--image--wrapper {
1310
+
1311
+ /**
1312
+ * Do not edit directly
1313
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1314
+ */
1315
+ /**
1316
+ * TOKENS:
1317
+ */
1318
+ /**
1319
+ * MAPS:
1320
+ */
1321
+ .ilo--card__type__feature {
1322
+ --max-width: 22.0793140407rem;
1323
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1324
+ display: flex;
1325
+ margin-top: 0;
1423
1326
  position: relative;
1424
1327
  }
1425
- .ilo--card--isvideo .ilo--card--image--wrapper::before {
1426
- 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");
1427
- background-color: rgb(45, 45, 45);
1428
- background-position: center;
1429
- background-size: 18px 20px;
1430
- background-repeat: no-repeat;
1431
- content: "";
1432
- display: block;
1433
- height: 40px;
1434
- left: 0;
1435
- position: absolute;
1436
- top: 0;
1437
- width: 40px;
1438
- z-index: 1;
1328
+ .ilo--card__type__feature.ilo--card__theme__dark {
1329
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1439
1330
  }
1440
- .ilo--card--multilink {
1441
- padding: 1.2861736334rem;
1331
+ .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list {
1332
+ border-top: 2px solid rgba(237, 240, 242, 0.25);
1442
1333
  }
1443
- .ilo--card--multilink .ilo--card--image--wrapper {
1444
- display: none;
1334
+ .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list--link {
1335
+ color: rgb(255, 255, 255);
1336
+ 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");
1445
1337
  }
1446
- .ilo--card--multilink .ilo--card--content .ilo--card--image--wrapper {
1447
- display: block;
1338
+ .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 {
1339
+ color: rgb(30, 45, 190);
1340
+ 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");
1448
1341
  }
1449
- @media screen and (min-width: 610px) {
1450
- .ilo--card--multilink {
1451
- padding: 2.1436227224rem;
1452
- }
1342
+ .ilo--card__type__feature picture::before {
1343
+ transition-property: opacity;
1344
+ transition-duration: 150ms;
1345
+ transition-timing-function: ease-out;
1453
1346
  }
1454
- @media screen and (min-width: 1024px) {
1455
- .ilo--card--multilink {
1456
- padding: 3.0010718114rem 2.5723472669rem;
1457
- }
1347
+ .ilo--card__type__feature:hover, .ilo--card__type__feature:focus, .ilo--card__type__feature:focus-within {
1348
+ background-color: rgb(255, 255, 255);
1349
+ border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
1350
+ 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));
1458
1351
  }
1459
- .ilo--card--multilink .ilo--card--title {
1460
- font-size: 23.32px;
1461
- letter-spacing: -0.035em;
1462
- line-height: 29.15px;
1463
- margin-bottom: 0.7188906752rem;
1464
- color: rgb(45, 45, 45);
1352
+ .ilo--card__type__feature:hover picture::before, .ilo--card__type__feature:focus picture::before, .ilo--card__type__feature:focus-within picture::before {
1353
+ opacity: 0.4;
1354
+ z-index: 1;
1355
+ transition-property: opacity;
1356
+ transition-duration: 150ms;
1357
+ transition-timing-function: ease-out;
1465
1358
  }
1466
- @media screen and (min-width: 610px) {
1467
- .ilo--card--multilink .ilo--card--title {
1468
- font-size: 29.16px;
1469
- letter-spacing: -0.035em;
1470
- line-height: 36.45px;
1471
- margin-bottom: 0.5741425509rem;
1472
- }
1359
+ .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 {
1360
+ filter: saturate(0);
1473
1361
  }
1474
- .ilo--card--multilink .ilo--card--intro {
1475
- font-size: 16px;
1476
- letter-spacing: normal;
1477
- line-height: 23.36px;
1478
- margin-bottom: 1.910132288rem;
1479
- color: rgb(45, 45, 45);
1362
+ .ilo--card__type__feature .ilo--link-list {
1363
+ border-top: 0.1071811361rem solid rgb(237, 240, 242);
1364
+ margin-left: -1.2861736334rem;
1365
+ margin-right: -1.2861736334rem;
1366
+ margin-top: 1.822079314rem;
1367
+ position: relative;
1368
+ z-index: 2;
1480
1369
  }
1481
- @media screen and (min-width: 610px) {
1482
- .ilo--card--multilink .ilo--card--intro {
1483
- font-size: 18.66px;
1484
- letter-spacing: normal;
1485
- line-height: 27.24px;
1486
- margin-bottom: 1.8685411561rem;
1487
- }
1370
+ .ilo--card__type__feature .ilo--link-list--link, .ilo--card__type__feature .ilo--link-list--link:hover {
1371
+ border-bottom: none;
1372
+ padding-left: 1.2861736334rem;
1373
+ padding-right: 1.2861736334rem;
1488
1374
  }
1489
- .ilo--card--multilink.ilo--card--dark {
1490
- background: rgb(255, 255, 255);
1375
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--wrap {
1376
+ display: flex;
1377
+ flex-wrap: wrap;
1378
+ width: 100%;
1491
1379
  }
1492
- .ilo--card--multilink.ilo--card--dark .ilo--card--title {
1493
- color: rgb(45, 45, 45);
1380
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--content {
1381
+ width: 100%;
1494
1382
  }
1495
- .ilo--card--multilink.ilo--card--dark .ilo--card--intro {
1496
- color: rgb(45, 45, 45);
1383
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--image--wrapper {
1384
+ width: 100%;
1497
1385
  }
1498
- .ilo--card--multilink.ilo--card--wide {
1499
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1386
+ .ilo--card__type__feature.ilo--card__size__wide, .ilo--card__type__feature.ilo--card__size__fluid {
1387
+ --max-width: 40.4072883173rem;
1500
1388
  }
1501
1389
  @media screen and (min-width: 610px) {
1502
- .ilo--card--multilink.ilo--card--wide {
1503
- padding: 3.0010718114rem 2.5723472669rem;
1504
- }
1505
- .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1506
- flex-direction: row-reverse;
1507
- }
1508
- .right-to-left .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1390
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--wrap, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--wrap {
1509
1391
  flex-direction: row;
1510
1392
  }
1511
- .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1512
- display: flex;
1513
- column-gap: 1.7148981779rem;
1514
- }
1515
- .right-to-left .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1393
+ .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 {
1516
1394
  flex-direction: row-reverse;
1517
1395
  }
1518
- .ilo--card--multilink.ilo--card--wide .ilo--card--image--wrapper {
1519
- display: block;
1396
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--content, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--content {
1397
+ display: flex;
1398
+ flex-direction: row;
1399
+ flex-wrap: wrap;
1400
+ position: relative;
1520
1401
  width: 50%;
1521
1402
  }
1522
- .ilo--card--multilink.ilo--card--wide .ilo--card--content {
1403
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image--wrapper {
1523
1404
  width: 50%;
1524
1405
  }
1525
- .ilo--card--multilink.ilo--card--wide .ilo--card--content .ilo--card--image--wrapper {
1526
- display: none;
1406
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--image, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image {
1407
+ object-fit: cover;
1527
1408
  }
1528
- }
1529
- .ilo--card--multilink.ilo--card--standard {
1530
- padding: 2.5723472669rem 2.1436227224rem;
1531
- }
1532
- @media screen and (min-width: 610px) {
1533
- .ilo--card--multilink.ilo--card--standard {
1534
- padding: 2.5723472669rem 2.1436227224rem;
1535
- }
1536
- }
1537
- @media screen and (min-width: 1024px) {
1538
- .ilo--card--multilink.ilo--card--standard {
1539
- padding: 2.5723472669rem 2.1436227224rem;
1540
- }
1541
- }
1542
- .ilo--card--multilink.ilo--card--narrow {
1543
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1544
- }
1545
- @media screen and (min-width: 610px) {
1546
- .ilo--card--multilink.ilo--card--narrow {
1547
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1548
- }
1549
- }
1550
- @media screen and (min-width: 1024px) {
1551
- .ilo--card--multilink.ilo--card--narrow {
1552
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1409
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--date, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--date {
1410
+ align-self: flex-end;
1411
+ width: 100%;
1553
1412
  }
1554
- }
1555
- .ilo--card--multilink.ilo--card--narrow .ilo--card--image--wrapper {
1556
- display: none;
1557
- }
1558
- .ilo--card--multilink.ilo--card--narrow .ilo--card--content .ilo--card--image--wrapper {
1559
- display: block;
1560
- margin-bottom: 1.2861736334rem;
1561
- }
1562
- @media screen and (min-width: 610px) {
1563
- .ilo--card--multilink.ilo--card--narrow .ilo--card--title {
1564
- font-size: 23.32px;
1565
- letter-spacing: -0.035em;
1566
- line-height: 29.15px;
1567
- margin-bottom: 0.7188906752rem;
1413
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--eyebrow, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--eyebrow {
1414
+ width: 100%;
1568
1415
  }
1569
- }
1570
- @media screen and (min-width: 610px) {
1571
- .ilo--card--multilink.ilo--card--narrow .ilo--card--intro {
1572
- font-size: 16px;
1573
- letter-spacing: normal;
1574
- line-height: 23.36px;
1575
- margin-bottom: 1.910132288rem;
1416
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--title, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--title {
1417
+ width: 100%;
1576
1418
  }
1577
- }
1578
- .ilo--card--multilink .ilo--link-list {
1579
- margin-top: 1.8756698821rem;
1580
- }
1581
- .ilo--card--detail {
1582
- border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1583
- padding: 1.2861736334rem 0;
1584
- position: relative;
1585
- }
1586
- @media screen and (min-width: 1024px) {
1587
- .ilo--card--detail {
1588
- padding: 1.7148981779rem 0;
1419
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--link-list, .ilo--card__type__feature.ilo--card__size__fluid .ilo--link-list {
1420
+ width: calc(100% + 48px);
1421
+ align-self: flex-end;
1589
1422
  }
1590
1423
  }
1591
- .ilo--card--detail:hover, .ilo--card--detail:focus, .ilo--card--detail:focus-within {
1592
- 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));
1593
- }
1594
- .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before, .ilo--card--detail:focus-within picture::before {
1595
- opacity: 0.4;
1596
- z-index: 2;
1597
- }
1598
- .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 {
1599
- 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");
1424
+ .ilo--card__type__feature .ilo--card--wrap {
1425
+ display: flex;
1426
+ flex-direction: column;
1427
+ width: 100%;
1600
1428
  }
1601
- .ilo--card--detail picture {
1429
+ .ilo--card__type__feature picture {
1602
1430
  display: flex;
1431
+ height: 100%;
1603
1432
  position: relative;
1604
1433
  }
1605
- .ilo--card--detail picture::before {
1434
+ .ilo--card__type__feature picture::before {
1606
1435
  background-color: rgb(30, 45, 190);
1607
1436
  content: "";
1608
1437
  display: block;
@@ -1611,725 +1440,590 @@ body {
1611
1440
  opacity: 0;
1612
1441
  position: absolute;
1613
1442
  top: 0;
1443
+ transition: opacity 150ms ease-in-out;
1614
1444
  width: 100%;
1615
1445
  z-index: -1;
1616
- transition-property: opacity;
1617
- transition-duration: 150ms;
1618
- transition-timing-function: ease-out;
1619
1446
  }
1620
- .ilo--card--detail .ilo--card--wrap {
1447
+ .ilo--card__type__feature .ilo--card--content {
1621
1448
  display: flex;
1449
+ flex: 1 1 auto;
1450
+ flex-direction: column;
1451
+ padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
1622
1452
  }
1623
- .right-to-left .ilo--card--detail .ilo--card--wrap {
1624
- flex-direction: row-reverse;
1625
- }
1626
- .ilo--card--detail .ilo--card--image {
1627
- object-fit: contain;
1628
- width: 4.1264737406rem;
1629
- }
1630
- @media screen and (min-width: 1024px) {
1631
- .ilo--card--detail .ilo--card--image {
1632
- width: 10.718113612rem;
1633
- }
1634
- }
1635
- .ilo--card--detail .ilo--card--image--wrapper {
1636
- max-width: 4.1264737406rem;
1637
- width: 100%;
1638
- }
1639
- @media screen and (min-width: 1024px) {
1640
- .ilo--card--detail .ilo--card--image--wrapper {
1641
- max-width: 10.718113612rem;
1642
- }
1643
- }
1644
- .ilo--card--detail .ilo--card--content {
1645
- padding: 0 1.2861736334rem;
1453
+ .ilo--card__type__feature.ilo--card__linklist .ilo--card--content {
1454
+ padding-bottom: 0;
1646
1455
  }
1647
- .ilo--card--detail .ilo--card--title {
1648
- font-size: 18.66px;
1456
+ .ilo--card__type__feature .ilo--card--title {
1457
+ font-size: 23.32px;
1649
1458
  letter-spacing: -0.035em;
1650
- line-height: 24.26px;
1651
- }
1652
- @media screen and (min-width: 1024px) {
1653
- .ilo--card--detail .ilo--card--title {
1654
- font-size: 23.32px;
1655
- letter-spacing: -0.035em;
1656
- line-height: 29.15px;
1657
- }
1459
+ line-height: 29.15px;
1460
+ margin-bottom: 1.5763397642rem;
1461
+ font-family: Overpass;
1462
+ font-weight: 700;
1658
1463
  }
1659
- .ilo--card--detail .ilo--card--event-date {
1660
- font-size: 16px;
1464
+ .ilo--card__type__feature .ilo--card--eyebrow {
1465
+ font-size: 14.93px;
1661
1466
  letter-spacing: normal;
1662
- line-height: 23.36px;
1663
- margin-bottom: 0;
1664
- padding-left: 1.2861736334rem;
1665
- position: relative;
1666
- }
1667
- .ilo--card--detail .ilo--card--event-date::before {
1668
- background-repeat: no-repeat;
1669
- content: "";
1670
- display: inline-block;
1671
- height: 0.7502679528rem;
1672
- left: 0;
1673
- position: absolute;
1674
- top: 50%;
1675
- transform: rotate(-90deg) translateX(50%);
1676
- width: 0.6430868167rem;
1677
- 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");
1467
+ line-height: 19.71px;
1468
+ margin-bottom: 0.3376482577rem;
1678
1469
  }
1679
- .ilo--card--detail .ilo--card--date {
1680
- font-size: 16px;
1681
- letter-spacing: normal;
1682
- line-height: 23.36px;
1470
+ .ilo--card__type__feature .ilo--card--date {
1471
+ margin-bottom: 0;
1472
+ margin-top: auto;
1683
1473
  }
1684
- .ilo--card--graphic {
1474
+
1475
+ /**
1476
+ * Do not edit directly
1477
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1478
+ */
1479
+ /**
1480
+ * TOKENS:
1481
+ */
1482
+ /**
1483
+ * MAPS:
1484
+ */
1485
+ .ilo--card__type__text {
1486
+ --max-width: 16.1307609861rem;
1685
1487
  border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1686
- margin-top: 2.1436227224rem;
1687
- padding: 0 1.2861736334rem 2.1436227224rem;
1688
- position: relative;
1689
- }
1690
- .ilo--card--graphic::before {
1691
- background: inherit;
1692
- content: "";
1693
- display: block;
1694
- height: 40px;
1695
- position: absolute;
1696
- width: calc(100% - 73px);
1697
- }
1698
- .ilo--card--graphic::after {
1699
- 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");
1700
- background-position: bottom right;
1701
- background-size: cover;
1702
- content: "";
1703
- height: 40px;
1704
- display: block;
1705
- position: absolute;
1706
- width: 73.4px;
1707
- }
1708
- .ilo--card--graphic.ilo--card--dark::after {
1709
- 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");
1710
- }
1711
- .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 {
1712
- 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");
1713
- }
1714
- .ilo--card--graphic::before {
1715
- left: 0;
1716
- top: -39.7px;
1717
- }
1718
- .right-to-left .ilo--card--graphic::before {
1719
- left: auto;
1720
- right: 0;
1721
- }
1722
- .ilo--card--graphic::after {
1723
- right: 0;
1724
- top: -39.7px;
1725
- transition: background-image 150ms ease-out;
1488
+ padding: 1.2861736334rem 2.1436227224rem;
1489
+ clip-path: polygon(0 0, calc(100% - 73px) 0, 100% 40px, 100% 100%, 0 100%);
1726
1490
  }
1727
- .right-to-left .ilo--card--graphic::after {
1728
- left: 0;
1729
- right: auto;
1730
- transform: rotateY(180deg);
1731
- }
1732
- .ilo--card--graphic .ilo--profile--contents--light * {
1491
+ .ilo--card__type__text [class$=profile--contents--light] * {
1733
1492
  color: rgb(45, 45, 45);
1734
1493
  }
1735
- .ilo--card--graphic .ilo--profile--contents--dark * {
1494
+ .ilo--card__type__text [class$=profile--contents--dark] * {
1736
1495
  color: rgb(255, 255, 255);
1737
1496
  }
1738
- .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
1497
+ .ilo--card__type__text:hover, .ilo--card__type__text:focus, .ilo--card__type__text:focus-within {
1739
1498
  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));
1740
1499
  }
1741
- .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents *, .ilo--card--graphic:focus-within .ilo--profile--contents * {
1500
+ .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] * {
1742
1501
  color: rgb(30, 45, 190);
1743
1502
  }
1744
1503
  @media screen and (min-width: 610px) {
1745
- .ilo--card--graphic {
1746
- padding: 0 1.7148981779rem 2.1436227224rem;
1747
- }
1748
- .ilo--card--graphic::before {
1749
- background: inherit;
1750
- content: "";
1751
- display: block;
1752
- height: 40px;
1753
- position: absolute;
1754
- width: calc(100% - 73px);
1755
- }
1756
- .ilo--card--graphic::after {
1757
- 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");
1758
- background-position: bottom right;
1759
- background-size: cover;
1760
- content: "";
1761
- height: 40px;
1762
- display: block;
1763
- position: absolute;
1764
- width: 73.4px;
1765
- }
1766
- .ilo--card--graphic.ilo--card--dark::after {
1767
- 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");
1768
- }
1769
- .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 {
1770
- 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");
1771
- }
1772
- .ilo--card--graphic::before {
1773
- left: 0;
1774
- top: -39.7px;
1775
- }
1776
- .right-to-left .ilo--card--graphic::before {
1777
- left: auto;
1778
- right: 0;
1779
- }
1780
- .ilo--card--graphic::after {
1781
- right: 0;
1782
- top: -39.7px;
1783
- }
1784
- .right-to-left .ilo--card--graphic::after {
1785
- left: 0;
1786
- right: auto;
1787
- transform: rotateY(180deg);
1788
- }
1789
- }
1790
- @media screen and (min-width: 1024px) {
1791
- .ilo--card--graphic::before {
1792
- background: inherit;
1793
- content: "";
1794
- display: block;
1795
- height: 40px;
1796
- position: absolute;
1797
- width: calc(100% - 73px);
1798
- }
1799
- .ilo--card--graphic::after {
1800
- 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");
1801
- background-position: bottom right;
1802
- background-size: cover;
1803
- content: "";
1804
- height: 40px;
1805
- display: block;
1806
- position: absolute;
1807
- width: 73.4px;
1808
- }
1809
- .ilo--card--graphic.ilo--card--dark::after {
1810
- 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");
1811
- }
1812
- .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 {
1813
- 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");
1814
- }
1815
- .ilo--card--graphic::before {
1816
- left: 0;
1817
- top: -39.7px;
1818
- }
1819
- .right-to-left .ilo--card--graphic::before {
1820
- left: auto;
1821
- right: 0;
1822
- }
1823
- .ilo--card--graphic::after {
1824
- right: 0;
1825
- top: -39.7px;
1826
- }
1827
- .right-to-left .ilo--card--graphic::after {
1828
- left: 0;
1829
- right: auto;
1830
- transform: rotateY(180deg);
1831
- }
1832
- }
1833
- .ilo--card--graphic.ilo--card--wide {
1834
- padding: 0 1.7148981779rem 2.1436227224rem;
1835
- }
1836
- @media screen and (min-width: 610px) {
1837
- .ilo--card--graphic.ilo--card--wide {
1838
- padding: 0 1.7148981779rem 2.1436227224rem;
1504
+ .ilo--card__type__text {
1505
+ padding: 1.7148981779rem 2.1436227224rem;
1839
1506
  }
1840
1507
  }
1841
- .ilo--card--graphic.ilo--card--standard {
1842
- padding: 0 1.7148981779rem 2.1436227224rem;
1508
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1509
+ --max-width: 28.0278670954rem;
1510
+ padding: 1.7148981779rem 2.1436227224rem;
1843
1511
  }
1844
1512
  @media screen and (min-width: 610px) {
1845
- .ilo--card--graphic.ilo--card--standard {
1846
- padding: 0 1.7148981779rem 2.1436227224rem;
1513
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1514
+ padding: 1.7148981779rem 2.1436227224rem;
1847
1515
  }
1848
1516
  }
1849
- .ilo--card--graphic.ilo--card--narrow {
1850
- padding: 0 1.2861736334rem 2.1436227224rem;
1517
+ .ilo--card__type__text.ilo--card__size__narrow {
1518
+ --max-width: 16.1307609861rem;
1519
+ padding: 1.2861736334rem 2.1436227224rem;
1851
1520
  }
1852
1521
  @media screen and (min-width: 610px) {
1853
- .ilo--card--graphic.ilo--card--narrow {
1854
- padding: 0 1.2861736334rem 2.1436227224rem;
1522
+ .ilo--card__type__text.ilo--card__size__narrow {
1523
+ padding: 1.2861736334rem 2.1436227224rem;
1855
1524
  }
1856
1525
  }
1857
- .ilo--card--graphic.ilo--card--narrow .ilo--card--title {
1526
+ .ilo--card__type__text.ilo--card__size__narrow .ilo--card--title {
1858
1527
  font-size: 18.66px;
1859
1528
  letter-spacing: -0.035em;
1860
1529
  line-height: 24.26px;
1861
1530
  margin-bottom: 1.674953518rem;
1862
1531
  }
1863
- .ilo--card--graphic.ilo--card--dark {
1532
+ .ilo--card__type__text.ilo--card__dark {
1864
1533
  border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1865
1534
  }
1866
- .ilo--card--graphic .ilo--card--eyebrow {
1535
+ .ilo--card__type__text .ilo--card--eyebrow {
1867
1536
  margin-bottom: 1.0110920672rem;
1868
1537
  }
1869
- .ilo--card--graphic .ilo--card--title {
1538
+ .ilo--card__type__text .ilo--card--title {
1870
1539
  font-size: 18.66px;
1871
1540
  letter-spacing: -0.035em;
1872
1541
  line-height: 24.26px;
1873
1542
  margin-bottom: 1.674953518rem;
1874
1543
  }
1875
1544
  @media screen and (min-width: 610px) {
1876
- .ilo--card--graphic .ilo--card--title {
1545
+ .ilo--card__type__text .ilo--card--title {
1877
1546
  font-size: 23.32px;
1878
1547
  letter-spacing: -0.035em;
1879
1548
  line-height: 29.15px;
1880
1549
  margin-bottom: 1.5763397642rem;
1881
1550
  }
1882
1551
  }
1883
- .ilo--card--graphic .ilo--card--date {
1884
- display: block;
1885
- margin-bottom: 1.4398166117rem;
1552
+ .ilo--card__type__text .ilo--card--date {
1553
+ display: block;
1554
+ margin-bottom: 1.4398166117rem;
1555
+ }
1556
+ .ilo--card__type__text .ilo--card--content {
1557
+ display: flex;
1558
+ flex-direction: column;
1559
+ position: relative;
1560
+ }
1561
+ .ilo--card__type__text .ilo--card--content > * {
1562
+ justify-self: flex-start;
1563
+ }
1564
+ .ilo--card__type__text .ilo--card--content > *:last-child {
1565
+ justify-self: flex-end;
1566
+ margin-bottom: 0;
1567
+ }
1568
+
1569
+ /**
1570
+ * Do not edit directly
1571
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1572
+ */
1573
+ /**
1574
+ * TOKENS:
1575
+ */
1576
+ /**
1577
+ * MAPS:
1578
+ */
1579
+ .ilo--card__type__detail {
1580
+ --max-width: 18.3815648446rem;
1581
+ border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1582
+ padding: 1.2861736334rem 0;
1583
+ position: relative;
1584
+ }
1585
+ @media screen and (min-width: 1024px) {
1586
+ .ilo--card__type__detail {
1587
+ padding: 1.7148981779rem 0;
1588
+ }
1589
+ }
1590
+ .ilo--card__type__detail:hover, .ilo--card__type__detail:focus, .ilo--card__type__detail:focus-within {
1591
+ 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));
1592
+ }
1593
+ .ilo--card__type__detail:hover picture::before, .ilo--card__type__detail:focus picture::before, .ilo--card__type__detail:focus-within picture::before {
1594
+ opacity: 0.4;
1595
+ z-index: 2;
1596
+ }
1597
+ .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 {
1598
+ 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");
1599
+ }
1600
+ .ilo--card__type__detail .ilo--card--title {
1601
+ font-size: 18.66px;
1602
+ letter-spacing: -0.035em;
1603
+ line-height: 24.26px;
1604
+ }
1605
+ @media screen and (min-width: 1024px) {
1606
+ .ilo--card__size__wide .ilo--card__type__detail .ilo--card--title {
1607
+ font-size: 23.32px;
1608
+ letter-spacing: -0.035em;
1609
+ line-height: 29.15px;
1610
+ }
1611
+ .ilo--card__size__wide .ilo--card__type__detail .ilo--card--title {
1612
+ font-size: 18.66px;
1613
+ letter-spacing: -0.035em;
1614
+ line-height: 24.26px;
1615
+ }
1616
+ }
1617
+ .ilo--card__type__detail.ilo--card__size__wide, .ilo--card__type__detail.ilo--card__size__fluid {
1618
+ --max-width: 39.9249732047rem;
1619
+ }
1620
+ @media screen and (min-width: 1024px) {
1621
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--title, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--title {
1622
+ font-size: 23.32px;
1623
+ letter-spacing: -0.035em;
1624
+ line-height: 29.15px;
1625
+ }
1626
+ }
1627
+ @media screen and (min-width: 1024px) {
1628
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--image--wrapper {
1629
+ flex: 0 0 10.5037513398rem;
1630
+ }
1631
+ }
1632
+ @media screen and (min-width: 1024px) {
1633
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--picture, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--picture {
1634
+ width: 10.5037513398rem;
1635
+ }
1636
+ }
1637
+ .ilo--card__type__detail.ilo--card__size__narrow {
1638
+ --max-width: 18.3815648446rem;
1639
+ }
1640
+ .ilo--card__type__detail picture {
1641
+ display: flex;
1642
+ position: relative;
1643
+ }
1644
+ .ilo--card__type__detail picture::before {
1645
+ background-color: rgb(30, 45, 190);
1646
+ content: "";
1647
+ display: block;
1648
+ height: 100%;
1649
+ left: 0;
1650
+ opacity: 0;
1651
+ position: absolute;
1652
+ top: 0;
1653
+ width: 100%;
1654
+ z-index: -1;
1655
+ transition-property: opacity;
1656
+ transition-duration: 150ms;
1657
+ transition-timing-function: ease-out;
1658
+ }
1659
+ .ilo--card__type__detail .ilo--card--wrap {
1660
+ display: flex;
1661
+ }
1662
+ .right-to-left .ilo--card__type__detail .ilo--card--wrap {
1663
+ flex-direction: row-reverse;
1664
+ }
1665
+ .ilo--card__type__detail .ilo--card--title {
1666
+ font-size: 18.66px;
1667
+ letter-spacing: -0.035em;
1668
+ line-height: 24.26px;
1669
+ }
1670
+ .ilo--card__type__detail .ilo--card--image--wrapper {
1671
+ flex: 0 0 4.1264737406rem;
1672
+ }
1673
+ .ilo--card__type__detail .ilo--card--picture {
1674
+ object-fit: contain;
1675
+ width: 4.1264737406rem;
1676
+ }
1677
+ .ilo--card__type__detail .ilo--card--content {
1678
+ padding: 0 1.2861736334rem;
1886
1679
  }
1887
- .ilo--card--graphic .ilo--card--content {
1888
- display: flex;
1889
- flex-direction: column;
1680
+ .ilo--card__type__detail .ilo--card--date-extra {
1681
+ font-size: 16px;
1682
+ letter-spacing: normal;
1683
+ line-height: 23.36px;
1684
+ margin-bottom: 0;
1685
+ padding-left: 1.2861736334rem;
1890
1686
  position: relative;
1891
1687
  }
1892
- .ilo--card--graphic .ilo--card--content > * {
1893
- justify-self: flex-start;
1688
+ .ilo--card__type__detail .ilo--card--date-extra::before {
1689
+ background-repeat: no-repeat;
1690
+ content: "";
1691
+ display: inline-block;
1692
+ height: 0.7502679528rem;
1693
+ left: 0;
1694
+ position: absolute;
1695
+ top: 50%;
1696
+ transform: rotate(-90deg) translateX(50%);
1697
+ width: 0.6430868167rem;
1698
+ 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");
1894
1699
  }
1895
- .ilo--card--graphic .ilo--card--content > *:last-child {
1896
- justify-self: flex-end;
1897
- margin-bottom: 0;
1700
+ .ilo--card__type__detail .ilo--card--date {
1701
+ font-size: 16px;
1702
+ letter-spacing: normal;
1703
+ line-height: 23.36px;
1898
1704
  }
1899
- .ilo--card--graphicpromo {
1900
- max-width: 49.3033226152rem;
1705
+
1706
+ /**
1707
+ * Do not edit directly
1708
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1709
+ */
1710
+ /**
1711
+ * TOKENS:
1712
+ */
1713
+ /**
1714
+ * MAPS:
1715
+ */
1716
+ .ilo--card__type__promo {
1717
+ --max-width: 18.3815648446rem;
1901
1718
  padding: 2.1436227224rem 1.2861736334rem;
1902
1719
  width: 100%;
1903
1720
  }
1904
- .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus, .ilo--card--graphicpromo:focus-within {
1905
- 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));
1906
- }
1907
1721
  @media screen and (min-width: 610px) {
1908
- .ilo--card--graphicpromo {
1722
+ .ilo--card__type__promo {
1909
1723
  padding: 2.5723472669rem;
1910
1724
  }
1911
1725
  }
1912
1726
  @media screen and (min-width: 1024px) {
1913
- .ilo--card--graphicpromo {
1727
+ .ilo--card__type__promo {
1914
1728
  padding: 3.4297963558rem 3.8585209003rem;
1915
1729
  }
1916
1730
  }
1917
- .ilo--card--graphicpromo.ilo--card--wide {
1918
- padding: 3.4297963558rem 3.8585209003rem;
1731
+ .ilo--card__type__promo.ilo--card__size__standard {
1732
+ --max-width: 33.9764201501rem;
1733
+ padding: 2.5723472669rem;
1919
1734
  }
1920
1735
  @media screen and (min-width: 610px) {
1921
- .ilo--card--graphicpromo.ilo--card--wide {
1922
- padding: 3.4297963558rem 3.8585209003rem;
1736
+ .ilo--card__type__promo.ilo--card__size__standard {
1737
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1923
1738
  }
1924
1739
  }
1925
1740
  @media screen and (min-width: 1024px) {
1926
- .ilo--card--graphicpromo.ilo--card--wide {
1927
- padding: 3.4297963558rem 3.8585209003rem;
1741
+ .ilo--card__type__promo.ilo--card__size__standard {
1742
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1928
1743
  }
1929
1744
  }
1930
- .ilo--card--graphicpromo.ilo--card--standard {
1931
- padding: 2.5723472669rem;
1745
+ .ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut {
1746
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
1747
+ }
1748
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1749
+ --max-width: 49.3033226152rem;
1750
+ padding: 3.4297963558rem 3.8585209003rem;
1932
1751
  }
1933
1752
  @media screen and (min-width: 610px) {
1934
- .ilo--card--graphicpromo.ilo--card--standard {
1935
- padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem 2.5723472669rem;
1753
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1754
+ padding: 3.4297963558rem 3.8585209003rem;
1936
1755
  }
1937
1756
  }
1938
1757
  @media screen and (min-width: 1024px) {
1939
- .ilo--card--graphicpromo.ilo--card--standard {
1940
- padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem 2.5723472669rem;
1758
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1759
+ padding: 3.4297963558rem 3.8585209003rem;
1941
1760
  }
1942
1761
  }
1943
- .ilo--card--graphicpromo.ilo--card--narrow {
1762
+ .ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut, .ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut {
1763
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
1764
+ }
1765
+ .ilo--card__type__promo.ilo--card__size__narrow {
1766
+ --max-width: 18.3815648446rem;
1944
1767
  padding: 2.1436227224rem 1.2861736334rem;
1945
1768
  }
1946
1769
  @media screen and (min-width: 610px) {
1947
- .ilo--card--graphicpromo.ilo--card--narrow {
1770
+ .ilo--card__type__promo.ilo--card__size__narrow {
1948
1771
  padding: 2.1436227224rem 1.2861736334rem;
1949
1772
  }
1950
1773
  }
1951
1774
  @media screen and (min-width: 1024px) {
1952
- .ilo--card--graphicpromo.ilo--card--narrow {
1775
+ .ilo--card__type__promo.ilo--card__size__narrow {
1953
1776
  padding: 2.1436227224rem 1.2861736334rem;
1954
1777
  }
1955
1778
  }
1956
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1779
+ .ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut {
1780
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
1781
+ }
1782
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1957
1783
  font-size: 29.16px;
1958
1784
  letter-spacing: -0.035em;
1959
1785
  line-height: 36.45px;
1960
1786
  margin-bottom: 0.5741425509rem;
1961
1787
  }
1962
1788
  @media screen and (min-width: 610px) {
1963
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1789
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1964
1790
  font-size: 36.45px;
1965
1791
  letter-spacing: -0.035em;
1966
1792
  line-height: 43.74px;
1967
1793
  margin-bottom: 0.4278063594rem;
1968
1794
  }
1969
1795
  }
1970
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--intro {
1796
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--intro {
1971
1797
  font-size: 16px;
1972
1798
  letter-spacing: normal;
1973
1799
  line-height: 23.36px;
1974
1800
  margin-bottom: 1.910132288rem;
1975
1801
  }
1976
- .ilo--card--graphicpromo.ilo--card--light:not(:hover) .ilo--card--title {
1802
+ .ilo--card__type__promo.ilo--card__theme__light:not(:hover) .ilo--card--title {
1977
1803
  color: rgb(45, 45, 45);
1978
1804
  transition-property: color;
1979
1805
  transition-duration: 150ms;
1980
1806
  transition-timing-function: ease-out;
1981
1807
  }
1982
- .ilo--card--graphicpromo .ilo--card--title {
1808
+ .ilo--card__type__promo .ilo--card--title {
1983
1809
  font-size: 29.16px;
1984
1810
  letter-spacing: -0.035em;
1985
1811
  line-height: 36.45px;
1986
1812
  margin-bottom: 0.5741425509rem;
1987
1813
  }
1988
1814
  @media screen and (min-width: 610px) {
1989
- .ilo--card--graphicpromo .ilo--card--title {
1815
+ .ilo--card__type__promo .ilo--card--title {
1990
1816
  font-size: 36.45px;
1991
1817
  letter-spacing: -0.035em;
1992
1818
  line-height: 43.74px;
1993
1819
  margin-bottom: 0.8565309039rem;
1994
1820
  }
1995
1821
  }
1996
- .ilo--card--graphicpromo .ilo--card--intro {
1822
+ .ilo--card__type__promo .ilo--card--intro {
1997
1823
  font-size: 16px;
1998
1824
  letter-spacing: normal;
1999
1825
  line-height: 23.36px;
2000
1826
  margin-bottom: 1.910132288rem;
2001
1827
  }
2002
1828
  @media screen and (min-width: 610px) {
2003
- .ilo--card--graphicpromo .ilo--card--intro {
1829
+ .ilo--card__type__promo .ilo--card--intro {
2004
1830
  font-size: 18.66px;
2005
1831
  letter-spacing: normal;
2006
1832
  line-height: 27.24px;
2007
1833
  margin-bottom: 1.8685411561rem;
2008
1834
  }
2009
1835
  }
2010
- .ilo--card--factlist {
2011
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2012
- max-width: 45.8735262594rem;
2013
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
2014
- pointer-events: none;
2015
- }
2016
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2017
- height: 40px;
2018
- top: -2.127545552rem;
2019
- width: calc(100% - 73px);
2020
- }
2021
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2022
- height: 40px;
2023
- top: -2.127545552rem;
2024
- width: 73.3px;
2025
- }
2026
- .ilo--card--factlist.ilo--card--dark {
2027
- background: rgb(35, 0, 80);
2028
- }
2029
- @media screen and (min-width: 1024px) {
2030
- .ilo--card--factlist {
2031
- padding: 0 2.1436227224rem 3.0010718114rem 2.1436227224rem;
2032
- }
2033
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2034
- height: 48px;
2035
- top: -2.5562700965rem;
2036
- width: calc(100% - 87px);
2037
- }
2038
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2039
- height: 48px;
2040
- top: -2.5562700965rem;
2041
- width: 87.3px;
2042
- }
2043
- }
2044
- .ilo--card--factlist.ilo--card--wide {
2045
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1836
+
1837
+ /**
1838
+ * Do not edit directly
1839
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1840
+ */
1841
+ /**
1842
+ * TOKENS:
1843
+ */
1844
+ /**
1845
+ * MAPS:
1846
+ */
1847
+ .ilo--card__type__multilink {
1848
+ --max-width: 28.7245444802rem;
1849
+ padding: 1.2861736334rem;
2046
1850
  }
2047
- @media screen and (min-width: 610px) {
2048
- .ilo--card--factlist.ilo--card--wide {
2049
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
2050
- }
1851
+ .ilo--card__type__multilink .ilo--card--image--wrapper {
1852
+ display: none;
2051
1853
  }
2052
- .ilo--card--factlist.ilo--card--standard {
2053
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1854
+ .ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper {
1855
+ display: block;
2054
1856
  }
2055
1857
  @media screen and (min-width: 610px) {
2056
- .ilo--card--factlist.ilo--card--standard {
2057
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
1858
+ .ilo--card__type__multilink {
1859
+ padding: 2.1436227224rem;
2058
1860
  }
2059
1861
  }
2060
- .ilo--card--factlist.ilo--card--narrow {
2061
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
2062
- }
2063
- @media screen and (min-width: 610px) {
2064
- .ilo--card--factlist.ilo--card--narrow {
2065
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1862
+ @media screen and (min-width: 1024px) {
1863
+ .ilo--card__type__multilink {
1864
+ padding: 3.0010718114rem 2.5723472669rem;
2066
1865
  }
2067
1866
  }
2068
- .ilo--card--factlist.ilo--card--dark {
2069
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2070
- }
2071
- .ilo--card--factlist.ilo--card--dark .ilo--card--title {
2072
- color: rgb(255, 255, 255);
2073
- transition-property: color;
2074
- transition-duration: 150ms;
2075
- transition-timing-function: ease-out;
2076
- }
2077
- .ilo--card--factlist.ilo--card--dark .ilo--list__item {
2078
- color: rgb(255, 255, 255);
2079
- }
2080
- .ilo--card--factlist.ilo--card--dark .ilo--list__item:last-of-type {
2081
- margin-bottom: 0;
2082
- }
2083
- .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 {
2084
- color: rgb(255, 255, 255);
2085
- transition-property: color;
2086
- transition-duration: 150ms;
2087
- transition-timing-function: ease-out;
2088
- }
2089
- .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 {
2090
- color: rgb(255, 255, 255);
2091
- }
2092
- .ilo--card--factlist .ilo--card--title {
2093
- color: rgb(45, 45, 45);
1867
+ .ilo--card__type__multilink .ilo--card--title {
2094
1868
  font-size: 23.32px;
2095
1869
  letter-spacing: -0.035em;
2096
1870
  line-height: 29.15px;
2097
- margin-bottom: 1.1476152197rem;
1871
+ margin-bottom: 0.7188906752rem;
1872
+ color: rgb(45, 45, 45);
2098
1873
  }
2099
- @media screen and (min-width: 1024px) {
2100
- .ilo--card--factlist .ilo--card--title {
1874
+ @media screen and (min-width: 610px) {
1875
+ .ilo--card__type__multilink .ilo--card--title {
2101
1876
  font-size: 29.16px;
2102
1877
  letter-spacing: -0.035em;
2103
1878
  line-height: 36.45px;
2104
- margin-bottom: 1.4315916399rem;
1879
+ margin-bottom: 0.5741425509rem;
2105
1880
  }
2106
1881
  }
2107
- .ilo--card--stat {
2108
- border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
2109
- margin-top: 2.1436227224rem;
2110
- padding: 0 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2111
- position: relative;
2112
- width: 100%;
2113
- }
2114
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2115
- left: 0;
2116
- top: -2.127545552rem;
2117
- }
2118
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2119
- left: auto;
2120
- right: 0;
2121
- }
2122
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2123
- right: 0;
2124
- top: -2.127545552rem;
2125
- }
2126
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2127
- left: 0;
2128
- right: auto;
2129
- transform: rotateY(180deg);
2130
- }
2131
- .ilo--card--stat.ilo--card--blue {
2132
- background: rgb(235, 245, 253);
2133
- }
2134
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2135
- background: inherit;
2136
- content: "";
2137
- display: block;
2138
- height: 40px;
2139
- position: absolute;
2140
- width: calc(100% - 73px);
2141
- }
2142
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2143
- 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");
2144
- background-position: bottom right;
2145
- background-size: cover;
2146
- content: "";
2147
- height: 40px;
2148
- display: block;
2149
- position: absolute;
2150
- width: 73.4px;
1882
+ .ilo--card__type__multilink .ilo--card--intro {
1883
+ font-size: 16px;
1884
+ letter-spacing: normal;
1885
+ line-height: 23.36px;
1886
+ margin-bottom: 1.910132288rem;
1887
+ color: rgb(45, 45, 45);
2151
1888
  }
2152
- .ilo--card--stat.ilo--card--yellow {
2153
- background: rgb(255, 205, 45);
1889
+ @media screen and (min-width: 610px) {
1890
+ .ilo--card__type__multilink .ilo--card--intro {
1891
+ font-size: 18.66px;
1892
+ letter-spacing: normal;
1893
+ line-height: 27.24px;
1894
+ margin-bottom: 1.8685411561rem;
1895
+ }
2154
1896
  }
2155
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2156
- background: inherit;
2157
- content: "";
2158
- display: block;
2159
- height: 40px;
2160
- position: absolute;
2161
- width: calc(100% - 73px);
1897
+ .ilo--card__type__multilink.ilo--card__size__standard {
1898
+ --max-width: 28.7245444802rem;
1899
+ padding: 2.5723472669rem 2.1436227224rem;
2162
1900
  }
2163
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2164
- 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");
2165
- background-position: bottom right;
2166
- background-size: cover;
2167
- content: "";
2168
- height: 40px;
2169
- display: block;
2170
- position: absolute;
2171
- width: 73.4px;
1901
+ @media screen and (min-width: 610px) {
1902
+ .ilo--card__type__multilink.ilo--card__size__standard {
1903
+ padding: 2.5723472669rem 2.1436227224rem;
1904
+ }
2172
1905
  }
2173
- .ilo--card--stat.ilo--card--green {
2174
- background: rgb(140, 225, 100);
1906
+ @media screen and (min-width: 1024px) {
1907
+ .ilo--card__type__multilink.ilo--card__size__standard {
1908
+ padding: 2.5723472669rem 2.1436227224rem;
1909
+ }
2175
1910
  }
2176
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2177
- background: inherit;
2178
- content: "";
2179
- display: block;
2180
- height: 40px;
2181
- position: absolute;
2182
- width: calc(100% - 73px);
1911
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1912
+ --max-width: 20.0964630225rem;
1913
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
2183
1914
  }
2184
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2185
- 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");
2186
- background-position: bottom right;
2187
- background-size: cover;
2188
- content: "";
2189
- height: 40px;
2190
- display: block;
2191
- position: absolute;
2192
- width: 73.4px;
1915
+ @media screen and (min-width: 610px) {
1916
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1917
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1918
+ }
2193
1919
  }
2194
- .ilo--card--stat.ilo--card--turquoise {
2195
- background: rgb(5, 210, 210);
1920
+ @media screen and (min-width: 1024px) {
1921
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1922
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1923
+ }
2196
1924
  }
2197
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2198
- background: inherit;
2199
- content: "";
2200
- display: block;
2201
- height: 40px;
2202
- position: absolute;
2203
- width: calc(100% - 73px);
1925
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper {
1926
+ display: none;
2204
1927
  }
2205
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2206
- 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");
2207
- background-position: bottom right;
2208
- background-size: cover;
2209
- content: "";
2210
- height: 40px;
1928
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper {
2211
1929
  display: block;
2212
- position: absolute;
2213
- width: 73.4px;
1930
+ margin-bottom: 1.2861736334rem;
2214
1931
  }
2215
- .ilo--card--stat .ilo--card--content {
2216
- display: flex;
2217
- flex-wrap: wrap;
2218
- height: 100%;
1932
+ @media screen and (min-width: 610px) {
1933
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title {
1934
+ font-size: 23.32px;
1935
+ letter-spacing: -0.035em;
1936
+ line-height: 29.15px;
1937
+ margin-bottom: 0.7188906752rem;
1938
+ }
2219
1939
  }
2220
- .right-to-left .ilo--card--stat .ilo--card--content {
2221
- flex-direction: row-reverse;
1940
+ @media screen and (min-width: 610px) {
1941
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro {
1942
+ font-size: 16px;
1943
+ letter-spacing: normal;
1944
+ line-height: 23.36px;
1945
+ margin-bottom: 1.910132288rem;
1946
+ }
2222
1947
  }
2223
- .ilo--card--stat .ilo--card--title {
2224
- color: rgb(35, 0, 80);
2225
- font-size: 36.45px;
2226
- letter-spacing: -0.035em;
2227
- line-height: 43.74px;
2228
- margin-bottom: 0.4278063594rem;
2229
- width: 100%;
1948
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1949
+ --max-width: 59.1639871383rem;
1950
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
2230
1951
  }
2231
- .ilo--card--stat .ilo--card--intro {
2232
- color: rgb(35, 0, 80);
2233
- font-family: Overpass;
2234
- font-size: 18.66px;
2235
- letter-spacing: normal;
2236
- line-height: 27.24px;
2237
- margin-bottom: 1.6734954235rem;
2238
- width: 100%;
1952
+ @media screen and (min-width: 610px) {
1953
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1954
+ padding: 3.0010718114rem 2.5723472669rem;
1955
+ }
1956
+ .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 {
1957
+ flex-direction: row-reverse;
1958
+ }
1959
+ .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 {
1960
+ flex-direction: row;
1961
+ }
1962
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap {
1963
+ display: flex;
1964
+ column-gap: 1.7148981779rem;
1965
+ }
1966
+ .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 {
1967
+ flex-direction: row-reverse;
1968
+ }
1969
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper {
1970
+ display: block;
1971
+ width: 50%;
1972
+ }
1973
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content {
1974
+ width: 50%;
1975
+ }
1976
+ .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 {
1977
+ display: none;
1978
+ }
2239
1979
  }
2240
- .ilo--card--stat .ilo--link {
2241
- font-size: 11.94px;
2242
- letter-spacing: -0.02em;
2243
- line-height: 16.24px;
2244
- align-self: flex-end;
1980
+ .ilo--card__type__multilink .ilo--link-list {
1981
+ margin-top: 1.8756698821rem;
1982
+ position: relative;
1983
+ z-index: 3;
2245
1984
  }
2246
- .ilo--card--data {
1985
+
1986
+ /**
1987
+ * Do not edit directly
1988
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1989
+ */
1990
+ /**
1991
+ * TOKENS:
1992
+ */
1993
+ /**
1994
+ * MAPS:
1995
+ */
1996
+ .ilo--card__type__data {
1997
+ --max-width: 16.1307609861rem;
2247
1998
  background: rgb(235, 245, 253);
2248
1999
  border-bottom: 0.1607717042rem solid #82afdc;
2249
2000
  margin-top: 2.1436227224rem;
2250
- max-width: 32.154340836rem;
2251
- padding: 0 1.2861736334rem 3.0010718114rem;
2001
+ padding: 1.2861736334rem 3.0010718114rem;
2252
2002
  position: relative;
2003
+ width: 100%;
2253
2004
  }
2254
- .ilo--card--data::before {
2255
- background: inherit;
2256
- content: "";
2257
- display: block;
2258
- height: 40px;
2259
- position: absolute;
2260
- width: calc(100% - 73px);
2261
- }
2262
- .ilo--card--data::after {
2263
- 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");
2264
- background-position: bottom right;
2265
- background-size: cover;
2266
- content: "";
2267
- height: 40px;
2268
- display: block;
2269
- position: absolute;
2270
- width: 73.4px;
2271
- }
2272
- .ilo--card--data:hover, .ilo--card--data:focus, .ilo--card--data:focus-within {
2005
+ .ilo--card__type__data:hover, .ilo--card__type__data:focus, .ilo--card__type__data:focus-within {
2273
2006
  background: rgb(235, 245, 253);
2274
2007
  }
2275
- .ilo--card--data::before {
2276
- left: 0;
2277
- top: -2.127545552rem;
2278
- }
2279
- .right-to-left .ilo--card--data::before {
2280
- left: auto;
2281
- right: 0;
2282
- }
2283
- .ilo--card--data::after {
2284
- right: 0;
2285
- top: -2.127545552rem;
2286
- }
2287
- .right-to-left .ilo--card--data::after {
2288
- left: 0;
2289
- right: auto;
2290
- transform: rotateY(180deg);
2008
+ .ilo--card__type__data.ilo--card__size__narrow {
2009
+ --max-width: 16.1307609861rem;
2010
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2291
2011
  }
2292
- @media screen and (min-width: 610px) {
2293
- .ilo--card--data::before {
2294
- background: inherit;
2295
- content: "";
2296
- display: block;
2297
- height: 48px;
2298
- position: absolute;
2299
- width: calc(100% - 84px);
2300
- }
2301
- .ilo--card--data::after {
2302
- 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");
2303
- background-position: bottom right;
2304
- background-size: cover;
2305
- content: "";
2306
- height: 48px;
2307
- display: block;
2308
- position: absolute;
2309
- width: 84.4px;
2310
- }
2311
- .ilo--card--data::before {
2312
- top: -2.5562700965rem;
2313
- }
2314
- .ilo--card--data::after {
2315
- top: -2.5562700965rem;
2316
- }
2012
+ .ilo--card__type__data.ilo--card__size__wide, .ilo--card__type__data.ilo--card__size__fluid {
2013
+ --max-width: 32.154340836rem;
2014
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
2317
2015
  }
2318
- .ilo--card--data .ilo--card--image--wrapper {
2319
- display: none;
2016
+ .ilo--card__type__data .ilo--card--image--wrapper {
2320
2017
  width: max(10.9860664523rem, 50%);
2321
2018
  }
2322
- .ilo--card--data .ilo--card--content .ilo--card--image--wrapper {
2323
- display: block;
2324
- }
2325
- .ilo--card--data--content-label {
2019
+ .ilo--card__type__data--content-label {
2326
2020
  font-size: 14.93px;
2327
2021
  letter-spacing: normal;
2328
2022
  line-height: 20.3px;
2329
2023
  margin-bottom: 0.6540478038rem;
2330
2024
  color: rgb(109, 109, 109);
2331
2025
  }
2332
- .ilo--card--data--content-copy {
2026
+ .ilo--card__type__data--content-copy {
2333
2027
  font-size: 23.32px;
2334
2028
  letter-spacing: -0.035em;
2335
2029
  line-height: 29.15px;
@@ -2338,175 +2032,161 @@ body {
2338
2032
  font-family: Overpass;
2339
2033
  font-weight: 500;
2340
2034
  }
2341
- .ilo--card--data--content-files {
2035
+ .ilo--card__type__data--content-files {
2342
2036
  margin-bottom: 2.1436227224rem;
2343
2037
  }
2344
- .ilo--card--data .ilo--link {
2038
+ .ilo--card__type__data .ilo--link {
2345
2039
  font-size: 18.66px;
2346
2040
  letter-spacing: -0.035em;
2347
2041
  line-height: 24.26px;
2348
2042
  }
2349
- .ilo--card--data--file {
2043
+ .ilo--card__type__data--file {
2350
2044
  margin: 0.2143622722rem 0.4287245445rem 0.2143622722rem 0;
2351
2045
  }
2352
- .ilo--card--data--file:last-of-type {
2046
+ .ilo--card__type__data--file:last-of-type {
2353
2047
  margin-right: 0;
2354
2048
  }
2355
- .ilo--card--feature {
2356
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2357
- display: flex;
2358
- margin-top: 0;
2049
+
2050
+ /**
2051
+ * Do not edit directly
2052
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2053
+ */
2054
+ /**
2055
+ * TOKENS:
2056
+ */
2057
+ /**
2058
+ * MAPS:
2059
+ */
2060
+ .ilo--card__type__stat {
2061
+ --max-width: 18.3815648446rem;
2062
+ border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
2063
+ padding: 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2359
2064
  position: relative;
2065
+ width: 100%;
2066
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2360
2067
  }
2361
- .ilo--card--feature::before {
2362
- display: none;
2068
+ .ilo--card__type__stat.ilo--card__color__blue {
2069
+ background: rgb(235, 245, 253);
2363
2070
  }
2364
- .ilo--card--feature.ilo--card--dark {
2365
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2071
+ .ilo--card__type__stat.ilo--card__color__yellow {
2072
+ background: rgb(255, 205, 45);
2366
2073
  }
2367
- .ilo--card--feature.ilo--card--dark .ilo--link-list {
2368
- border-top: 2px solid rgba(237, 240, 242, 0.25);
2074
+ .ilo--card__type__stat.ilo--card__color__green {
2075
+ background: rgb(140, 225, 100);
2369
2076
  }
2370
- .ilo--card--feature.ilo--card--dark .ilo--link-list--link {
2371
- color: rgb(255, 255, 255);
2372
- 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");
2077
+ .ilo--card__type__stat.ilo--card__color__turquoise {
2078
+ background: rgb(5, 210, 210);
2373
2079
  }
2374
- .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 {
2375
- color: rgb(30, 45, 190);
2376
- 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");
2080
+ .ilo--card__type__stat .ilo--card--content {
2081
+ display: flex;
2082
+ flex-wrap: wrap;
2083
+ height: 100%;
2377
2084
  }
2378
- .ilo--card--feature picture::before {
2379
- transition-property: opacity;
2380
- transition-duration: 150ms;
2381
- transition-timing-function: ease-out;
2085
+ .right-to-left .ilo--card__type__stat .ilo--card--content {
2086
+ flex-direction: row-reverse;
2382
2087
  }
2383
- .ilo--card--feature:hover, .ilo--card--feature:focus, .ilo--card--feature:focus-within {
2384
- background-color: rgb(255, 255, 255);
2385
- 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));
2386
- border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
2088
+ .ilo--card__type__stat .ilo--card--title {
2089
+ color: rgb(35, 0, 80);
2090
+ font-size: 36.45px;
2091
+ letter-spacing: -0.035em;
2092
+ line-height: 43.74px;
2093
+ margin-bottom: 0.4278063594rem;
2094
+ width: 100%;
2387
2095
  }
2388
- .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before, .ilo--card--feature:focus-within picture::before {
2389
- opacity: 0.4;
2390
- z-index: 1;
2391
- transition-property: opacity;
2392
- transition-duration: 150ms;
2393
- transition-timing-function: ease-out;
2096
+ .ilo--card__type__stat .ilo--card--intro {
2097
+ color: rgb(35, 0, 80);
2098
+ font-family: Overpass;
2099
+ font-size: 18.66px;
2100
+ letter-spacing: normal;
2101
+ line-height: 27.24px;
2102
+ margin-bottom: 1.6734954235rem;
2103
+ width: 100%;
2394
2104
  }
2395
- .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image, .ilo--card--feature:focus-within .ilo--card--image {
2396
- filter: saturate(0);
2105
+ .ilo--card__type__stat .ilo--link {
2106
+ font-size: 11.94px;
2107
+ letter-spacing: -0.02em;
2108
+ line-height: 16.24px;
2109
+ align-self: flex-end;
2397
2110
  }
2398
- .ilo--card--feature .ilo--link-list {
2399
- border-top: 0.1071811361rem solid rgb(237, 240, 242);
2400
- margin-left: -1.2861736334rem;
2401
- margin-right: -1.2861736334rem;
2402
- margin-top: 1.822079314rem;
2403
- position: relative;
2404
- z-index: 2;
2111
+
2112
+ /**
2113
+ * Do not edit directly
2114
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2115
+ */
2116
+ /**
2117
+ * TOKENS:
2118
+ */
2119
+ /**
2120
+ * MAPS:
2121
+ */
2122
+ .ilo--card__type__factlist {
2123
+ --max-width: 20.0964630225rem;
2124
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2125
+ padding: 1.2861736334rem 2.5723472669rem;
2126
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2405
2127
  }
2406
- .ilo--card--feature .ilo--link-list--link, .ilo--card--feature .ilo--link-list--link:hover {
2407
- border-bottom: none;
2408
- padding-left: 1.2861736334rem;
2409
- padding-right: 1.2861736334rem;
2128
+ @media screen and (min-width: 1024px) {
2129
+ .ilo--card__type__factlist {
2130
+ padding: 2.1436227224rem 3.0010718114rem;
2131
+ }
2410
2132
  }
2411
- .ilo--card--feature.ilo--card--narrow .ilo--card--wrap, .ilo--card--feature.ilo--card--standard .ilo--card--wrap {
2412
- display: flex;
2413
- flex-wrap: wrap;
2414
- width: 100%;
2133
+ .ilo--card__type__factlist.ilo--card__size__wide {
2134
+ --max-width: 45.8735262594rem;
2135
+ padding: 2.1436227224rem 2.7867095391rem;
2415
2136
  }
2416
- .ilo--card--feature.ilo--card--narrow .ilo--card--content, .ilo--card--feature.ilo--card--standard .ilo--card--content {
2417
- width: 100%;
2137
+ @media screen and (min-width: 610px) {
2138
+ .ilo--card__type__factlist.ilo--card__size__wide {
2139
+ padding: 2.1436227224rem 3.2154340836rem;
2140
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
2141
+ }
2418
2142
  }
2419
- .ilo--card--feature.ilo--card--narrow .ilo--card--image--wrapper, .ilo--card--feature.ilo--card--standard .ilo--card--image--wrapper {
2420
- width: 100%;
2143
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2144
+ --max-width: 20.0964630225rem;
2145
+ padding: 1.2861736334rem 2.5723472669rem;
2146
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2421
2147
  }
2422
2148
  @media screen and (min-width: 610px) {
2423
- .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2424
- flex-direction: row;
2425
- }
2426
- .right-to-left .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2427
- flex-direction: row-reverse;
2428
- }
2429
- .ilo--card--feature.ilo--card--wide .ilo--card--content {
2430
- display: flex;
2431
- flex-direction: row;
2432
- flex-wrap: wrap;
2433
- position: relative;
2434
- width: 50%;
2435
- }
2436
- .ilo--card--feature.ilo--card--wide .ilo--card--image--wrapper {
2437
- width: 50%;
2438
- }
2439
- .ilo--card--feature.ilo--card--wide .ilo--card--image {
2440
- object-fit: cover;
2441
- }
2442
- .ilo--card--feature.ilo--card--wide .ilo--card--date {
2443
- align-self: flex-end;
2444
- width: 100%;
2445
- }
2446
- .ilo--card--feature.ilo--card--wide .ilo--card--eyebrow {
2447
- width: 100%;
2448
- }
2449
- .ilo--card--feature.ilo--card--wide .ilo--card--title {
2450
- width: 100%;
2451
- }
2452
- .ilo--card--feature.ilo--card--wide .ilo--link-list {
2453
- width: calc(100% + 48px);
2149
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2150
+ padding: 1.2861736334rem 2.5723472669rem;
2454
2151
  }
2455
2152
  }
2456
- .ilo--card--feature .ilo--card--wrap {
2457
- display: flex;
2458
- flex-direction: column;
2459
- width: 100%;
2153
+ .ilo--card__type__factlist.ilo--card__theme__dark {
2154
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2460
2155
  }
2461
- .ilo--card--feature picture {
2462
- display: flex;
2463
- height: 100%;
2464
- position: relative;
2156
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--card--title {
2157
+ color: rgb(255, 255, 255);
2465
2158
  }
2466
- .ilo--card--feature picture::before {
2467
- background-color: rgb(30, 45, 190);
2468
- content: "";
2469
- display: block;
2470
- height: 100%;
2471
- left: 0;
2472
- opacity: 0;
2473
- position: absolute;
2474
- top: 0;
2475
- transition: opacity 150ms ease-in-out;
2476
- width: 100%;
2477
- z-index: -1;
2159
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item {
2160
+ color: rgb(255, 255, 255);
2478
2161
  }
2479
- .ilo--card--feature .ilo--card--content {
2480
- display: flex;
2481
- flex: 1 1 auto;
2482
- flex-direction: column;
2483
- padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
2162
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item:last-of-type {
2163
+ margin-bottom: 0;
2484
2164
  }
2485
- .ilo--card--feature.ilo--card--linklist .ilo--card--content {
2486
- padding-bottom: 0;
2165
+ .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 {
2166
+ color: rgb(255, 255, 255);
2487
2167
  }
2488
- .ilo--card--feature .ilo--card--title {
2168
+ .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 {
2169
+ color: rgb(255, 255, 255);
2170
+ }
2171
+ .ilo--card__type__factlist .ilo--card--title {
2172
+ color: rgb(45, 45, 45);
2489
2173
  font-size: 23.32px;
2490
2174
  letter-spacing: -0.035em;
2491
2175
  line-height: 29.15px;
2492
- margin-bottom: 1.5763397642rem;
2493
- font-family: Overpass;
2494
- font-weight: 700;
2495
- }
2496
- .ilo--card--feature .ilo--card--eyebrow {
2497
- font-size: 14.93px;
2498
- letter-spacing: normal;
2499
- line-height: 19.71px;
2500
- margin-bottom: 0.3376482577rem;
2176
+ margin-bottom: 1.1476152197rem;
2501
2177
  }
2502
- .ilo--card--feature .ilo--card--date {
2503
- margin-bottom: 0;
2504
- margin-top: auto;
2178
+ @media screen and (min-width: 1024px) {
2179
+ .ilo--card__type__factlist .ilo--card--title {
2180
+ font-size: 29.16px;
2181
+ letter-spacing: -0.035em;
2182
+ line-height: 36.45px;
2183
+ margin-bottom: 1.4315916399rem;
2184
+ }
2505
2185
  }
2506
2186
 
2507
2187
  /**
2508
2188
  * Do not edit directly
2509
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2189
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2510
2190
  */
2511
2191
  /**
2512
2192
  * TOKENS:
@@ -2514,34 +2194,29 @@ body {
2514
2194
  /**
2515
2195
  * MAPS:
2516
2196
  */
2197
+ .ilo--cardgroup__collapsed .ilo--cardgroup--inner {
2198
+ gap: 0;
2199
+ }
2200
+ .ilo--cardgroup__justify__start .ilo--cardgroup--inner {
2201
+ justify-content: flex-start;
2202
+ }
2203
+ .ilo--cardgroup__justify__between .ilo--cardgroup--inner {
2204
+ justify-content: space-between;
2205
+ }
2206
+ .ilo--cardgroup__justify__center .ilo--cardgroup--inner {
2207
+ justify-content: center;
2208
+ }
2517
2209
  .ilo--cardgroup--inner {
2518
2210
  display: flex;
2519
- flex-wrap: wrap;
2520
- justify-content: space-between;
2211
+ flex-flow: row wrap;
2212
+ justify-content: center;
2521
2213
  margin: auto;
2522
- row-gap: 1.7148981779rem;
2214
+ gap: 1.7148981779rem;
2215
+ width: 100%;
2523
2216
  }
2524
2217
  .right-to-left .ilo--cardgroup--inner {
2525
2218
  flex-direction: row-reverse;
2526
2219
  }
2527
- .ilo--cardgroup--inner .ilo--card {
2528
- width: 100%;
2529
- }
2530
- @media screen and (min-width: 1024px) {
2531
- .ilo--cardgroup--two .ilo--card {
2532
- width: calc(50% - 24px);
2533
- }
2534
- }
2535
- @media screen and (min-width: 1024px) {
2536
- .ilo--cardgroup--three .ilo--card {
2537
- width: calc(33.333% - 24px);
2538
- }
2539
- }
2540
- @media screen and (min-width: 1024px) {
2541
- .ilo--cardgroup--four .ilo--card {
2542
- width: calc(25% - 24px);
2543
- }
2544
- }
2545
2220
  .ilo--cardgroup--button-wrap {
2546
2221
  display: flex;
2547
2222
  justify-content: center;
@@ -2551,7 +2226,7 @@ body {
2551
2226
 
2552
2227
  /**
2553
2228
  * Do not edit directly
2554
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2229
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2555
2230
  */
2556
2231
  /**
2557
2232
  * 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:
@@ -2737,7 +2412,7 @@ body {
2737
2412
 
2738
2413
  /**
2739
2414
  * Do not edit directly
2740
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2415
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2741
2416
  */
2742
2417
  /**
2743
2418
  * TOKENS:
@@ -2747,7 +2422,7 @@ body {
2747
2422
  */
2748
2423
  /**
2749
2424
  * Do not edit directly
2750
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2425
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2751
2426
  */
2752
2427
  /**
2753
2428
  * TOKENS:
@@ -2757,7 +2432,7 @@ body {
2757
2432
  */
2758
2433
  /**
2759
2434
  * Do not edit directly
2760
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2435
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2761
2436
  */
2762
2437
  /**
2763
2438
  * TOKENS:
@@ -2767,7 +2442,7 @@ body {
2767
2442
  */
2768
2443
  /**
2769
2444
  * Do not edit directly
2770
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2445
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2771
2446
  */
2772
2447
  /**
2773
2448
  * TOKENS:
@@ -2893,7 +2568,7 @@ body {
2893
2568
 
2894
2569
  /**
2895
2570
  * Do not edit directly
2896
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2571
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2897
2572
  */
2898
2573
  /**
2899
2574
  * TOKENS:
@@ -2921,7 +2596,7 @@ body {
2921
2596
 
2922
2597
  /**
2923
2598
  * Do not edit directly
2924
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2599
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2925
2600
  */
2926
2601
  /**
2927
2602
  * TOKENS:
@@ -3009,7 +2684,7 @@ body {
3009
2684
 
3010
2685
  /**
3011
2686
  * Do not edit directly
3012
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2687
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3013
2688
  */
3014
2689
  /**
3015
2690
  * TOKENS:
@@ -3019,7 +2694,7 @@ body {
3019
2694
  */
3020
2695
  /**
3021
2696
  * Do not edit directly
3022
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2697
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3023
2698
  */
3024
2699
  /**
3025
2700
  * TOKENS:
@@ -3029,7 +2704,7 @@ body {
3029
2704
  */
3030
2705
  /**
3031
2706
  * Do not edit directly
3032
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2707
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3033
2708
  */
3034
2709
  /**
3035
2710
  * TOKENS:
@@ -3082,7 +2757,7 @@ body {
3082
2757
 
3083
2758
  /**
3084
2759
  * Do not edit directly
3085
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2760
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3086
2761
  */
3087
2762
  /**
3088
2763
  * TOKENS:
@@ -3157,7 +2832,7 @@ body {
3157
2832
 
3158
2833
  /**
3159
2834
  * Do not edit directly
3160
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2835
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3161
2836
  */
3162
2837
  /**
3163
2838
  * TOKENS:
@@ -3263,7 +2938,7 @@ body {
3263
2938
 
3264
2939
  /**
3265
2940
  * Do not edit directly
3266
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2941
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3267
2942
  */
3268
2943
  /**
3269
2944
  * TOKENS:
@@ -3286,7 +2961,7 @@ body {
3286
2961
 
3287
2962
  /**
3288
2963
  * Do not edit directly
3289
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2964
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3290
2965
  */
3291
2966
  /**
3292
2967
  * TOKENS:
@@ -3300,7 +2975,7 @@ body {
3300
2975
 
3301
2976
  /**
3302
2977
  * Do not edit directly
3303
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2978
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3304
2979
  */
3305
2980
  /**
3306
2981
  * TOKENS:
@@ -3310,7 +2985,7 @@ body {
3310
2985
  */
3311
2986
  /**
3312
2987
  * Do not edit directly
3313
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
2988
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3314
2989
  */
3315
2990
  /**
3316
2991
  * TOKENS:
@@ -3335,7 +3010,7 @@ body {
3335
3010
  }
3336
3011
  /**
3337
3012
  * Do not edit directly
3338
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3013
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3339
3014
  */
3340
3015
  /**
3341
3016
  * TOKENS:
@@ -3659,7 +3334,7 @@ body {
3659
3334
 
3660
3335
  /**
3661
3336
  * Do not edit directly
3662
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3337
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3663
3338
  */
3664
3339
  /**
3665
3340
  * TOKENS:
@@ -3782,7 +3457,7 @@ body {
3782
3457
 
3783
3458
  /**
3784
3459
  * Do not edit directly
3785
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3460
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3786
3461
  */
3787
3462
  /**
3788
3463
  * TOKENS:
@@ -3988,7 +3663,7 @@ body {
3988
3663
 
3989
3664
  /**
3990
3665
  * Do not edit directly
3991
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3666
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3992
3667
  */
3993
3668
  /**
3994
3669
  * TOKENS:
@@ -3999,7 +3674,7 @@ body {
3999
3674
  .ilo--hero-card {
4000
3675
  height: 100%;
4001
3676
  position: relative;
4002
- padding: 39px 16px;
3677
+ padding: 40px 16px;
4003
3678
  }
4004
3679
  @media screen and (min-width: 1024px) {
4005
3680
  .ilo--hero-card {
@@ -4044,12 +3719,7 @@ body {
4044
3719
  }
4045
3720
  }
4046
3721
  .ilo--hero-card__cornercut {
4047
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 39px, 100% 100%, 0 100%);
4048
- }
4049
- @media screen and (min-width: 1024px) {
4050
- .ilo--hero-card__cornercut {
4051
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
4052
- }
3722
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
4053
3723
  }
4054
3724
  .ilo--hero-card--datecopy {
4055
3725
  font-size: 16px;
@@ -4114,7 +3784,7 @@ body {
4114
3784
 
4115
3785
  /**
4116
3786
  * Do not edit directly
4117
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3787
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4118
3788
  */
4119
3789
  /**
4120
3790
  * TOKENS:
@@ -4170,7 +3840,7 @@ body {
4170
3840
 
4171
3841
  /**
4172
3842
  * Do not edit directly
4173
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3843
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4174
3844
  */
4175
3845
  /**
4176
3846
  * TOKENS:
@@ -4312,7 +3982,7 @@ body {
4312
3982
 
4313
3983
  /**
4314
3984
  * Do not edit directly
4315
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3985
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4316
3986
  */
4317
3987
  /**
4318
3988
  * TOKENS:
@@ -4322,7 +3992,7 @@ body {
4322
3992
  */
4323
3993
  /**
4324
3994
  * Do not edit directly
4325
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
3995
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4326
3996
  */
4327
3997
  /**
4328
3998
  * TOKENS:
@@ -4347,7 +4017,7 @@ body {
4347
4017
  }
4348
4018
  /**
4349
4019
  * Do not edit directly
4350
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4020
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4351
4021
  */
4352
4022
  /**
4353
4023
  * TOKENS:
@@ -4505,7 +4175,7 @@ body {
4505
4175
 
4506
4176
  /**
4507
4177
  * Do not edit directly
4508
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4178
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4509
4179
  */
4510
4180
  /**
4511
4181
  * TOKENS:
@@ -4600,7 +4270,7 @@ body {
4600
4270
 
4601
4271
  /**
4602
4272
  * Do not edit directly
4603
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4273
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4604
4274
  */
4605
4275
  /**
4606
4276
  * TOKENS:
@@ -4610,7 +4280,7 @@ body {
4610
4280
  */
4611
4281
  /**
4612
4282
  * Do not edit directly
4613
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4283
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4614
4284
  */
4615
4285
  /**
4616
4286
  * TOKENS:
@@ -4620,7 +4290,7 @@ body {
4620
4290
  */
4621
4291
  /**
4622
4292
  * Do not edit directly
4623
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4293
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4624
4294
  */
4625
4295
  /**
4626
4296
  * TOKENS:
@@ -4791,7 +4461,54 @@ body {
4791
4461
 
4792
4462
  /**
4793
4463
  * Do not edit directly
4794
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4464
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4465
+ */
4466
+ /**
4467
+ * TOKENS:
4468
+ */
4469
+ /**
4470
+ * MAPS:
4471
+ */
4472
+ .ilo--logo-grid--logos {
4473
+ display: flex;
4474
+ flex-flow: row wrap;
4475
+ grid-gap: 0.857449089rem;
4476
+ }
4477
+ .ilo--logo-grid--link {
4478
+ text-decoration: none;
4479
+ transition: background-color 0.2s ease-in-out;
4480
+ }
4481
+ .ilo--logo-grid__theme__light .ilo--logo-grid--link:hover, .ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover {
4482
+ background-color: rgb(235, 245, 253);
4483
+ }
4484
+ .ilo--logo-grid--item {
4485
+ display: flex;
4486
+ align-items: center;
4487
+ justify-content: center;
4488
+ height: 7.18113612rem;
4489
+ flex: 100%;
4490
+ }
4491
+ @media screen and (min-width: 414px) {
4492
+ .ilo--logo-grid--item {
4493
+ flex: 0 0 12.7545551983rem;
4494
+ }
4495
+ }
4496
+ .ilo--logo-grid__theme__light .ilo--logo-grid--item {
4497
+ background-color: rgb(237, 240, 242);
4498
+ }
4499
+ .ilo--logo-grid__theme__dark .ilo--logo-grid--item {
4500
+ background-color: rgb(255, 255, 255);
4501
+ }
4502
+ .ilo--logo-grid--item img {
4503
+ width: auto;
4504
+ height: auto;
4505
+ max-width: 8.038585209rem;
4506
+ max-height: 2.679528403rem;
4507
+ }
4508
+
4509
+ /**
4510
+ * Do not edit directly
4511
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4795
4512
  */
4796
4513
  /**
4797
4514
  * TOKENS:
@@ -4801,7 +4518,7 @@ body {
4801
4518
  */
4802
4519
  /**
4803
4520
  * Do not edit directly
4804
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4521
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4805
4522
  */
4806
4523
  /**
4807
4524
  * TOKENS:
@@ -4811,7 +4528,7 @@ body {
4811
4528
  */
4812
4529
  /**
4813
4530
  * Do not edit directly
4814
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4531
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4815
4532
  */
4816
4533
  /**
4817
4534
  * TOKENS:
@@ -4908,7 +4625,7 @@ body {
4908
4625
 
4909
4626
  /**
4910
4627
  * Do not edit directly
4911
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
4628
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4912
4629
  */
4913
4630
  /**
4914
4631
  * TOKENS:
@@ -5798,7 +5515,7 @@ body {
5798
5515
 
5799
5516
  /**
5800
5517
  * Do not edit directly
5801
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5518
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5802
5519
  */
5803
5520
  /**
5804
5521
  * TOKENS:
@@ -5808,7 +5525,7 @@ body {
5808
5525
  */
5809
5526
  /**
5810
5527
  * Do not edit directly
5811
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5528
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5812
5529
  */
5813
5530
  /**
5814
5531
  * TOKENS:
@@ -5818,7 +5535,7 @@ body {
5818
5535
  */
5819
5536
  /**
5820
5537
  * Do not edit directly
5821
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5538
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5822
5539
  */
5823
5540
  /**
5824
5541
  * TOKENS:
@@ -6010,7 +5727,7 @@ body {
6010
5727
 
6011
5728
  /**
6012
5729
  * Do not edit directly
6013
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5730
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6014
5731
  */
6015
5732
  /**
6016
5733
  * TOKENS:
@@ -6150,7 +5867,7 @@ body {
6150
5867
 
6151
5868
  /**
6152
5869
  * Do not edit directly
6153
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5870
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6154
5871
  */
6155
5872
  /**
6156
5873
  * TOKENS:
@@ -6160,7 +5877,7 @@ body {
6160
5877
  */
6161
5878
  /**
6162
5879
  * Do not edit directly
6163
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5880
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6164
5881
  */
6165
5882
  /**
6166
5883
  * TOKENS:
@@ -6185,7 +5902,7 @@ body {
6185
5902
  }
6186
5903
  /**
6187
5904
  * Do not edit directly
6188
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
5905
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6189
5906
  */
6190
5907
  /**
6191
5908
  * TOKENS:
@@ -6352,7 +6069,7 @@ body {
6352
6069
 
6353
6070
  /**
6354
6071
  * Do not edit directly
6355
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6072
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6356
6073
  */
6357
6074
  /**
6358
6075
  * TOKENS:
@@ -6459,7 +6176,7 @@ body {
6459
6176
 
6460
6177
  /**
6461
6178
  * Do not edit directly
6462
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6179
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6463
6180
  */
6464
6181
  /**
6465
6182
  * TOKENS:
@@ -6469,7 +6186,7 @@ body {
6469
6186
  */
6470
6187
  /**
6471
6188
  * Do not edit directly
6472
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6189
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6473
6190
  */
6474
6191
  /**
6475
6192
  * TOKENS:
@@ -6494,7 +6211,7 @@ body {
6494
6211
  }
6495
6212
  /**
6496
6213
  * Do not edit directly
6497
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6214
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6498
6215
  */
6499
6216
  /**
6500
6217
  * TOKENS:
@@ -6555,7 +6272,7 @@ body {
6555
6272
 
6556
6273
  /**
6557
6274
  * Do not edit directly
6558
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6275
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6559
6276
  */
6560
6277
  /**
6561
6278
  * TOKENS:
@@ -6970,7 +6687,7 @@ body {
6970
6687
 
6971
6688
  /**
6972
6689
  * Do not edit directly
6973
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6690
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6974
6691
  */
6975
6692
  /**
6976
6693
  * TOKENS:
@@ -7024,7 +6741,7 @@ body {
7024
6741
 
7025
6742
  /**
7026
6743
  * Do not edit directly
7027
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6744
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7028
6745
  */
7029
6746
  /**
7030
6747
  * TOKENS:
@@ -7182,7 +6899,7 @@ body {
7182
6899
 
7183
6900
  /**
7184
6901
  * Do not edit directly
7185
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
6902
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7186
6903
  */
7187
6904
  /**
7188
6905
  * TOKENS:
@@ -7533,7 +7250,7 @@ body {
7533
7250
 
7534
7251
  /**
7535
7252
  * Do not edit directly
7536
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7253
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7537
7254
  */
7538
7255
  /**
7539
7256
  * TOKENS:
@@ -7719,7 +7436,7 @@ body {
7719
7436
 
7720
7437
  /**
7721
7438
  * Do not edit directly
7722
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7439
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7723
7440
  */
7724
7441
  /**
7725
7442
  * TOKENS:
@@ -7777,7 +7494,7 @@ body {
7777
7494
 
7778
7495
  /**
7779
7496
  * Do not edit directly
7780
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7497
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7781
7498
  */
7782
7499
  /**
7783
7500
  * TOKENS:
@@ -7951,7 +7668,7 @@ body {
7951
7668
 
7952
7669
  /**
7953
7670
  * Do not edit directly
7954
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7671
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7955
7672
  */
7956
7673
  /**
7957
7674
  * TOKENS:
@@ -8126,7 +7843,7 @@ body {
8126
7843
 
8127
7844
  /**
8128
7845
  * Do not edit directly
8129
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
7846
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8130
7847
  */
8131
7848
  /**
8132
7849
  * TOKENS:
@@ -9036,7 +8753,7 @@ body {
9036
8753
 
9037
8754
  /**
9038
8755
  * Do not edit directly
9039
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
8756
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9040
8757
  */
9041
8758
  /**
9042
8759
  * TOKENS:
@@ -9046,7 +8763,7 @@ body {
9046
8763
  */
9047
8764
  /**
9048
8765
  * Do not edit directly
9049
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
8766
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9050
8767
  */
9051
8768
  /**
9052
8769
  * TOKENS:
@@ -9071,7 +8788,7 @@ body {
9071
8788
  }
9072
8789
  /**
9073
8790
  * Do not edit directly
9074
- * Generated on Wed, 19 Jul 2023 07:35:24 GMT
8791
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9075
8792
  */
9076
8793
  /**
9077
8794
  * TOKENS: