@ilo-org/styles 0.6.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 (41) hide show
  1. package/build/css/components/index.css +759 -1095
  2. package/build/css/components/index.css.map +1 -1
  3. package/build/css/global.css +1 -1
  4. package/build/css/index.css +759 -1095
  5. package/build/css/index.css.map +1 -1
  6. package/build/css/monorepo.css +759 -1095
  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/card.css +1 -1
  13. package/css/components/cardgroup.css +1 -1
  14. package/css/components/datacard.css +1 -0
  15. package/css/components/detailcard.css +1 -0
  16. package/css/components/factlistcard.css +1 -0
  17. package/css/components/featurecard.css +1 -0
  18. package/css/components/herocard.css +1 -1
  19. package/css/components/multilinkcard.css +1 -0
  20. package/css/components/promocard.css +1 -0
  21. package/css/components/statcard.css +1 -0
  22. package/css/components/textcard.css +1 -0
  23. package/css/global.css.map +1 -1
  24. package/css/index.css +1 -1
  25. package/css/index.css.map +1 -1
  26. package/css/monorepo.css +1 -1
  27. package/css/monorepo.css.map +1 -1
  28. package/package.json +1 -1
  29. package/scss/_mixins.scss +19 -20
  30. package/scss/components/_card.scss +79 -1377
  31. package/scss/components/_cardgroup.scss +26 -26
  32. package/scss/components/_datacard.scss +90 -0
  33. package/scss/components/_detailcard.scss +150 -0
  34. package/scss/components/_factlistcard.scss +110 -0
  35. package/scss/components/_featurecard.scss +218 -0
  36. package/scss/components/_herocard.scss +3 -19
  37. package/scss/components/_multilinkcard.scss +189 -0
  38. package/scss/components/_promocard.scss +157 -0
  39. package/scss/components/_statcard.scss +76 -0
  40. package/scss/components/_textcard.scss +135 -0
  41. package/scss/components/index.scss +8 -0
@@ -151,7 +151,7 @@ select {
151
151
  }
152
152
  /**
153
153
  * Do not edit directly
154
- * Generated on Fri, 21 Jul 2023 14:22:03 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 Fri, 21 Jul 2023 14:22:03 GMT
253
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
254
254
  */
255
255
  /**
256
256
  * TOKENS:
@@ -369,7 +369,7 @@ body {
369
369
 
370
370
  /**
371
371
  * Do not edit directly
372
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
372
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
373
373
  */
374
374
  /**
375
375
  * TOKENS:
@@ -394,7 +394,7 @@ body {
394
394
  }
395
395
  /**
396
396
  * Do not edit directly
397
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
397
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
398
398
  */
399
399
  /**
400
400
  * TOKENS:
@@ -648,7 +648,7 @@ body {
648
648
 
649
649
  /**
650
650
  * Do not edit directly
651
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
651
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
652
652
  */
653
653
  /**
654
654
  * TOKENS:
@@ -658,7 +658,7 @@ body {
658
658
  */
659
659
  /**
660
660
  * Do not edit directly
661
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
661
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
662
662
  */
663
663
  /**
664
664
  * TOKENS:
@@ -683,7 +683,7 @@ body {
683
683
  }
684
684
  /**
685
685
  * Do not edit directly
686
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
686
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
687
687
  */
688
688
  /**
689
689
  * TOKENS:
@@ -973,7 +973,7 @@ body {
973
973
 
974
974
  /**
975
975
  * Do not edit directly
976
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
976
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
977
977
  */
978
978
  /**
979
979
  * TOKENS:
@@ -1103,7 +1103,7 @@ body {
1103
1103
 
1104
1104
  /**
1105
1105
  * Do not edit directly
1106
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
1106
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1107
1107
  */
1108
1108
  /**
1109
1109
  * TOKENS:
@@ -1112,38 +1112,75 @@ body {
1112
1112
  * MAPS:
1113
1113
  */
1114
1114
  .ilo--card {
1115
- margin: 0;
1116
- 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;
1117
1122
  }
1118
1123
  .right-to-left .ilo--card {
1119
1124
  text-align: right;
1120
1125
  }
1121
- .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 {
1122
1127
  background: rgb(255, 255, 255);
1123
- color: rgb(30, 45, 190);
1124
1128
  outline: none;
1125
1129
  text-decoration: none;
1126
1130
  }
1127
- .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 {
1128
1132
  background: rgb(255, 255, 255);
1129
1133
  }
1130
- .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 {
1131
- 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");
1132
- }
1133
- .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 {
1134
1147
  color: rgb(30, 45, 190);
1135
1148
  }
1136
- .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 {
1137
- color: rgb(30, 45, 190);
1149
+ .ilo--card__theme__light {
1150
+ background: rgb(255, 255, 255);
1138
1151
  }
1139
- .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 {
1140
- color: rgb(30, 45, 190);
1152
+ .ilo--card__theme__dark {
1153
+ background: rgb(35, 0, 80);
1154
+ transition: background 150ms ease-out;
1141
1155
  }
1142
- .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 {
1143
- 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;
1144
1163
  }
1145
- .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 {
1146
- 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));
1147
1184
  }
1148
1185
  .ilo--card--link {
1149
1186
  background: none;
@@ -1165,6 +1202,21 @@ body {
1165
1202
  transition-duration: 150ms;
1166
1203
  transition-timing-function: ease-out;
1167
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
+ }
1168
1220
  .ilo--card--link--text {
1169
1221
  width: 1px;
1170
1222
  height: 1px;
@@ -1175,176 +1227,6 @@ body {
1175
1227
  clip: rect(0 0 0 0);
1176
1228
  overflow: hidden;
1177
1229
  }
1178
- .ilo--card--light {
1179
- background: rgb(255, 255, 255);
1180
- }
1181
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) {
1182
- background: rgb(35, 0, 80);
1183
- outline: none;
1184
- transition: background 150ms ease-out;
1185
- }
1186
- .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 {
1187
- color: rgb(237, 240, 242);
1188
- transition: color 150ms ease-out;
1189
- }
1190
- .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 {
1191
- color: rgb(255, 255, 255);
1192
- transition: color 150ms ease-out;
1193
- }
1194
- .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 {
1195
- color: rgb(237, 240, 242);
1196
- transition: color 150ms ease-out;
1197
- }
1198
- .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 {
1199
- color: rgb(237, 240, 242);
1200
- transition: color 150ms ease-out;
1201
- }
1202
- .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 {
1203
- color: rgb(237, 240, 242);
1204
- transition: color 150ms ease-out;
1205
- }
1206
- .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 {
1207
- background: rgb(35, 0, 80);
1208
- outline: none;
1209
- transition: background 150ms ease-out;
1210
- }
1211
- .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 {
1212
- color: rgb(237, 240, 242);
1213
- transition: color 150ms ease-out;
1214
- }
1215
- .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 {
1216
- color: rgb(255, 255, 255);
1217
- transition: color 150ms ease-out;
1218
- }
1219
- .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 {
1220
- color: rgb(237, 240, 242);
1221
- transition: color 150ms ease-out;
1222
- }
1223
- .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 {
1224
- color: rgb(237, 240, 242);
1225
- transition: color 150ms ease-out;
1226
- }
1227
- .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 {
1228
- color: rgb(237, 240, 242);
1229
- transition: color 150ms ease-out;
1230
- }
1231
- .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) {
1232
- margin-top: 2.1436227224rem;
1233
- padding-top: 0;
1234
- position: relative;
1235
- }
1236
- .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 {
1237
- background: inherit;
1238
- content: "";
1239
- display: block;
1240
- height: 40px;
1241
- position: absolute;
1242
- width: calc(100% - 73px);
1243
- }
1244
- .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 {
1245
- 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");
1246
- background-position: bottom right;
1247
- background-size: cover;
1248
- content: "";
1249
- height: 40px;
1250
- display: block;
1251
- position: absolute;
1252
- width: 73.4px;
1253
- }
1254
- .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 {
1255
- 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");
1256
- }
1257
- @media screen and (min-width: 610px) {
1258
- .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) {
1259
- margin-top: 2.5723472669rem;
1260
- }
1261
- .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 {
1262
- background: inherit;
1263
- content: "";
1264
- display: block;
1265
- height: 48px;
1266
- position: absolute;
1267
- width: calc(100% - 87px);
1268
- }
1269
- .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 {
1270
- 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");
1271
- background-position: bottom right;
1272
- background-size: cover;
1273
- content: "";
1274
- height: 48px;
1275
- display: block;
1276
- position: absolute;
1277
- width: 87.4px;
1278
- }
1279
- .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 {
1280
- 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");
1281
- }
1282
- }
1283
- @media screen and (min-width: 1024px) {
1284
- .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) {
1285
- margin-top: 3.4297963558rem;
1286
- }
1287
- .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 {
1288
- background: inherit;
1289
- content: "";
1290
- display: block;
1291
- height: 64px;
1292
- position: absolute;
1293
- width: calc(100% - 116px);
1294
- }
1295
- .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 {
1296
- 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");
1297
- background-position: bottom right;
1298
- background-size: cover;
1299
- content: "";
1300
- height: 64px;
1301
- display: block;
1302
- position: absolute;
1303
- width: 116.4px;
1304
- }
1305
- .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 {
1306
- 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");
1307
- }
1308
- }
1309
- .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 {
1310
- left: 0;
1311
- top: -2.1436227224rem;
1312
- transition: background-image 150ms ease-out;
1313
- }
1314
- .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 {
1315
- left: auto;
1316
- right: 0;
1317
- }
1318
- @media screen and (min-width: 610px) {
1319
- .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 {
1320
- top: -2.5562700965rem;
1321
- }
1322
- }
1323
- @media screen and (min-width: 1024px) {
1324
- .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 {
1325
- top: -3.4137191854rem;
1326
- }
1327
- }
1328
- .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 {
1329
- right: 0;
1330
- top: -2.1436227224rem;
1331
- transition: background-image 150ms ease-out;
1332
- }
1333
- .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 {
1334
- left: 0;
1335
- right: auto;
1336
- transform: rotateY(180deg);
1337
- }
1338
- @media screen and (min-width: 610px) {
1339
- .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 {
1340
- top: -2.5562700965rem;
1341
- }
1342
- }
1343
- @media screen and (min-width: 1024px) {
1344
- .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 {
1345
- top: -3.4137191854rem;
1346
- }
1347
- }
1348
1230
  .ilo--card--eyebrow {
1349
1231
  color: rgb(150, 10, 85);
1350
1232
  font-size: 16px;
@@ -1417,7 +1299,7 @@ body {
1417
1299
  line-height: 23.36px;
1418
1300
  margin-bottom: 1.3742266073rem;
1419
1301
  }
1420
- .ilo--card--image {
1302
+ .ilo--card--picture {
1421
1303
  max-width: 100%;
1422
1304
  width: 100%;
1423
1305
  }
@@ -1425,190 +1307,131 @@ body {
1425
1307
  position: relative;
1426
1308
  z-index: 2;
1427
1309
  }
1428
- .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;
1429
1326
  position: relative;
1430
1327
  }
1431
- .ilo--card--isvideo .ilo--card--image--wrapper::before {
1432
- 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");
1433
- background-color: rgb(45, 45, 45);
1434
- background-position: center;
1435
- background-size: 18px 20px;
1436
- background-repeat: no-repeat;
1437
- content: "";
1438
- display: block;
1439
- height: 40px;
1440
- left: 0;
1441
- position: absolute;
1442
- top: 0;
1443
- width: 40px;
1444
- z-index: 1;
1328
+ .ilo--card__type__feature.ilo--card__theme__dark {
1329
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1445
1330
  }
1446
- .ilo--card--multilink {
1447
- 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);
1448
1333
  }
1449
- .ilo--card--multilink .ilo--card--image--wrapper {
1450
- 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");
1451
1337
  }
1452
- .ilo--card--multilink .ilo--card--content .ilo--card--image--wrapper {
1453
- 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");
1454
1341
  }
1455
- @media screen and (min-width: 610px) {
1456
- .ilo--card--multilink {
1457
- padding: 2.1436227224rem;
1458
- }
1342
+ .ilo--card__type__feature picture::before {
1343
+ transition-property: opacity;
1344
+ transition-duration: 150ms;
1345
+ transition-timing-function: ease-out;
1459
1346
  }
1460
- @media screen and (min-width: 1024px) {
1461
- .ilo--card--multilink {
1462
- padding: 3.0010718114rem 2.5723472669rem;
1463
- }
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));
1464
1351
  }
1465
- .ilo--card--multilink .ilo--card--title {
1466
- font-size: 23.32px;
1467
- letter-spacing: -0.035em;
1468
- line-height: 29.15px;
1469
- margin-bottom: 0.7188906752rem;
1470
- 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;
1471
1358
  }
1472
- @media screen and (min-width: 610px) {
1473
- .ilo--card--multilink .ilo--card--title {
1474
- font-size: 29.16px;
1475
- letter-spacing: -0.035em;
1476
- line-height: 36.45px;
1477
- margin-bottom: 0.5741425509rem;
1478
- }
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);
1479
1361
  }
1480
- .ilo--card--multilink .ilo--card--intro {
1481
- font-size: 16px;
1482
- letter-spacing: normal;
1483
- line-height: 23.36px;
1484
- margin-bottom: 1.910132288rem;
1485
- 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;
1486
1369
  }
1487
- @media screen and (min-width: 610px) {
1488
- .ilo--card--multilink .ilo--card--intro {
1489
- font-size: 18.66px;
1490
- letter-spacing: normal;
1491
- line-height: 27.24px;
1492
- margin-bottom: 1.8685411561rem;
1493
- }
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;
1494
1374
  }
1495
- .ilo--card--multilink.ilo--card--dark {
1496
- 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%;
1497
1379
  }
1498
- .ilo--card--multilink.ilo--card--dark .ilo--card--title {
1499
- color: rgb(45, 45, 45);
1380
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--content {
1381
+ width: 100%;
1500
1382
  }
1501
- .ilo--card--multilink.ilo--card--dark .ilo--card--intro {
1502
- color: rgb(45, 45, 45);
1383
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--image--wrapper {
1384
+ width: 100%;
1503
1385
  }
1504
- .ilo--card--multilink.ilo--card--wide {
1505
- 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;
1506
1388
  }
1507
1389
  @media screen and (min-width: 610px) {
1508
- .ilo--card--multilink.ilo--card--wide {
1509
- padding: 3.0010718114rem 2.5723472669rem;
1510
- }
1511
- .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1512
- flex-direction: row-reverse;
1513
- }
1514
- .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 {
1515
1391
  flex-direction: row;
1516
1392
  }
1517
- .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1518
- display: flex;
1519
- column-gap: 1.7148981779rem;
1520
- }
1521
- .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 {
1522
1394
  flex-direction: row-reverse;
1523
1395
  }
1524
- .ilo--card--multilink.ilo--card--wide .ilo--card--image--wrapper {
1525
- 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;
1526
1401
  width: 50%;
1527
1402
  }
1528
- .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 {
1529
1404
  width: 50%;
1530
1405
  }
1531
- .ilo--card--multilink.ilo--card--wide .ilo--card--content .ilo--card--image--wrapper {
1532
- 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;
1533
1408
  }
1534
- }
1535
- .ilo--card--multilink.ilo--card--standard {
1536
- padding: 2.5723472669rem 2.1436227224rem;
1537
- }
1538
- @media screen and (min-width: 610px) {
1539
- .ilo--card--multilink.ilo--card--standard {
1540
- padding: 2.5723472669rem 2.1436227224rem;
1541
- }
1542
- }
1543
- @media screen and (min-width: 1024px) {
1544
- .ilo--card--multilink.ilo--card--standard {
1545
- padding: 2.5723472669rem 2.1436227224rem;
1546
- }
1547
- }
1548
- .ilo--card--multilink.ilo--card--narrow {
1549
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1550
- }
1551
- @media screen and (min-width: 610px) {
1552
- .ilo--card--multilink.ilo--card--narrow {
1553
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1554
- }
1555
- }
1556
- @media screen and (min-width: 1024px) {
1557
- .ilo--card--multilink.ilo--card--narrow {
1558
- 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%;
1559
1412
  }
1560
- }
1561
- .ilo--card--multilink.ilo--card--narrow .ilo--card--image--wrapper {
1562
- display: none;
1563
- }
1564
- .ilo--card--multilink.ilo--card--narrow .ilo--card--content .ilo--card--image--wrapper {
1565
- display: block;
1566
- margin-bottom: 1.2861736334rem;
1567
- }
1568
- @media screen and (min-width: 610px) {
1569
- .ilo--card--multilink.ilo--card--narrow .ilo--card--title {
1570
- font-size: 23.32px;
1571
- letter-spacing: -0.035em;
1572
- line-height: 29.15px;
1573
- 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%;
1574
1415
  }
1575
- }
1576
- @media screen and (min-width: 610px) {
1577
- .ilo--card--multilink.ilo--card--narrow .ilo--card--intro {
1578
- font-size: 16px;
1579
- letter-spacing: normal;
1580
- line-height: 23.36px;
1581
- 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%;
1582
1418
  }
1583
- }
1584
- .ilo--card--multilink .ilo--link-list {
1585
- margin-top: 1.8756698821rem;
1586
- }
1587
- .ilo--card--detail {
1588
- border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1589
- padding: 1.2861736334rem 0;
1590
- position: relative;
1591
- }
1592
- @media screen and (min-width: 1024px) {
1593
- .ilo--card--detail {
1594
- 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;
1595
1422
  }
1596
1423
  }
1597
- .ilo--card--detail:hover, .ilo--card--detail:focus, .ilo--card--detail:focus-within {
1598
- 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));
1599
- }
1600
- .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before, .ilo--card--detail:focus-within picture::before {
1601
- opacity: 0.4;
1602
- z-index: 2;
1603
- }
1604
- .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 {
1605
- 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%;
1606
1428
  }
1607
- .ilo--card--detail picture {
1429
+ .ilo--card__type__feature picture {
1608
1430
  display: flex;
1431
+ height: 100%;
1609
1432
  position: relative;
1610
1433
  }
1611
- .ilo--card--detail picture::before {
1434
+ .ilo--card__type__feature picture::before {
1612
1435
  background-color: rgb(30, 45, 190);
1613
1436
  content: "";
1614
1437
  display: block;
@@ -1617,725 +1440,590 @@ body {
1617
1440
  opacity: 0;
1618
1441
  position: absolute;
1619
1442
  top: 0;
1443
+ transition: opacity 150ms ease-in-out;
1620
1444
  width: 100%;
1621
1445
  z-index: -1;
1622
- transition-property: opacity;
1623
- transition-duration: 150ms;
1624
- transition-timing-function: ease-out;
1625
1446
  }
1626
- .ilo--card--detail .ilo--card--wrap {
1447
+ .ilo--card__type__feature .ilo--card--content {
1627
1448
  display: flex;
1449
+ flex: 1 1 auto;
1450
+ flex-direction: column;
1451
+ padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
1628
1452
  }
1629
- .right-to-left .ilo--card--detail .ilo--card--wrap {
1630
- flex-direction: row-reverse;
1453
+ .ilo--card__type__feature.ilo--card__linklist .ilo--card--content {
1454
+ padding-bottom: 0;
1631
1455
  }
1632
- .ilo--card--detail .ilo--card--image {
1633
- object-fit: contain;
1634
- width: 4.1264737406rem;
1456
+ .ilo--card__type__feature .ilo--card--title {
1457
+ font-size: 23.32px;
1458
+ letter-spacing: -0.035em;
1459
+ line-height: 29.15px;
1460
+ margin-bottom: 1.5763397642rem;
1461
+ font-family: Overpass;
1462
+ font-weight: 700;
1635
1463
  }
1636
- @media screen and (min-width: 1024px) {
1637
- .ilo--card--detail .ilo--card--image {
1638
- width: 10.718113612rem;
1464
+ .ilo--card__type__feature .ilo--card--eyebrow {
1465
+ font-size: 14.93px;
1466
+ letter-spacing: normal;
1467
+ line-height: 19.71px;
1468
+ margin-bottom: 0.3376482577rem;
1469
+ }
1470
+ .ilo--card__type__feature .ilo--card--date {
1471
+ margin-bottom: 0;
1472
+ margin-top: auto;
1473
+ }
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;
1487
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1488
+ padding: 1.2861736334rem 2.1436227224rem;
1489
+ clip-path: polygon(0 0, calc(100% - 73px) 0, 100% 40px, 100% 100%, 0 100%);
1490
+ }
1491
+ .ilo--card__type__text [class$=profile--contents--light] * {
1492
+ color: rgb(45, 45, 45);
1493
+ }
1494
+ .ilo--card__type__text [class$=profile--contents--dark] * {
1495
+ color: rgb(255, 255, 255);
1496
+ }
1497
+ .ilo--card__type__text:hover, .ilo--card__type__text:focus, .ilo--card__type__text:focus-within {
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));
1499
+ }
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] * {
1501
+ color: rgb(30, 45, 190);
1502
+ }
1503
+ @media screen and (min-width: 610px) {
1504
+ .ilo--card__type__text {
1505
+ padding: 1.7148981779rem 2.1436227224rem;
1639
1506
  }
1640
1507
  }
1641
- .ilo--card--detail .ilo--card--image--wrapper {
1642
- max-width: 4.1264737406rem;
1643
- width: 100%;
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;
1644
1511
  }
1645
- @media screen and (min-width: 1024px) {
1646
- .ilo--card--detail .ilo--card--image--wrapper {
1647
- max-width: 10.718113612rem;
1512
+ @media screen and (min-width: 610px) {
1513
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1514
+ padding: 1.7148981779rem 2.1436227224rem;
1648
1515
  }
1649
1516
  }
1650
- .ilo--card--detail .ilo--card--content {
1651
- padding: 0 1.2861736334rem;
1517
+ .ilo--card__type__text.ilo--card__size__narrow {
1518
+ --max-width: 16.1307609861rem;
1519
+ padding: 1.2861736334rem 2.1436227224rem;
1520
+ }
1521
+ @media screen and (min-width: 610px) {
1522
+ .ilo--card__type__text.ilo--card__size__narrow {
1523
+ padding: 1.2861736334rem 2.1436227224rem;
1524
+ }
1652
1525
  }
1653
- .ilo--card--detail .ilo--card--title {
1526
+ .ilo--card__type__text.ilo--card__size__narrow .ilo--card--title {
1654
1527
  font-size: 18.66px;
1655
1528
  letter-spacing: -0.035em;
1656
1529
  line-height: 24.26px;
1530
+ margin-bottom: 1.674953518rem;
1657
1531
  }
1658
- @media screen and (min-width: 1024px) {
1659
- .ilo--card--detail .ilo--card--title {
1532
+ .ilo--card__type__text.ilo--card__dark {
1533
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1534
+ }
1535
+ .ilo--card__type__text .ilo--card--eyebrow {
1536
+ margin-bottom: 1.0110920672rem;
1537
+ }
1538
+ .ilo--card__type__text .ilo--card--title {
1539
+ font-size: 18.66px;
1540
+ letter-spacing: -0.035em;
1541
+ line-height: 24.26px;
1542
+ margin-bottom: 1.674953518rem;
1543
+ }
1544
+ @media screen and (min-width: 610px) {
1545
+ .ilo--card__type__text .ilo--card--title {
1660
1546
  font-size: 23.32px;
1661
1547
  letter-spacing: -0.035em;
1662
1548
  line-height: 29.15px;
1549
+ margin-bottom: 1.5763397642rem;
1663
1550
  }
1664
1551
  }
1665
- .ilo--card--detail .ilo--card--event-date {
1666
- font-size: 16px;
1667
- letter-spacing: normal;
1668
- line-height: 23.36px;
1669
- margin-bottom: 0;
1670
- padding-left: 1.2861736334rem;
1671
- position: relative;
1672
- }
1673
- .ilo--card--detail .ilo--card--event-date::before {
1674
- background-repeat: no-repeat;
1675
- content: "";
1676
- display: inline-block;
1677
- height: 0.7502679528rem;
1678
- left: 0;
1679
- position: absolute;
1680
- top: 50%;
1681
- transform: rotate(-90deg) translateX(50%);
1682
- width: 0.6430868167rem;
1683
- 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");
1684
- }
1685
- .ilo--card--detail .ilo--card--date {
1686
- font-size: 16px;
1687
- letter-spacing: normal;
1688
- line-height: 23.36px;
1689
- }
1690
- .ilo--card--graphic {
1691
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1692
- margin-top: 2.1436227224rem;
1693
- padding: 0 1.2861736334rem 2.1436227224rem;
1694
- position: relative;
1695
- }
1696
- .ilo--card--graphic::before {
1697
- background: inherit;
1698
- content: "";
1699
- display: block;
1700
- height: 40px;
1701
- position: absolute;
1702
- width: calc(100% - 73px);
1703
- }
1704
- .ilo--card--graphic::after {
1705
- 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");
1706
- background-position: bottom right;
1707
- background-size: cover;
1708
- content: "";
1709
- height: 40px;
1552
+ .ilo--card__type__text .ilo--card--date {
1710
1553
  display: block;
1711
- position: absolute;
1712
- width: 73.4px;
1713
- }
1714
- .ilo--card--graphic.ilo--card--dark::after {
1715
- 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");
1716
- }
1717
- .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 {
1718
- 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");
1719
- }
1720
- .ilo--card--graphic::before {
1721
- left: 0;
1722
- top: -39.7px;
1554
+ margin-bottom: 1.4398166117rem;
1723
1555
  }
1724
- .right-to-left .ilo--card--graphic::before {
1725
- left: auto;
1726
- right: 0;
1556
+ .ilo--card__type__text .ilo--card--content {
1557
+ display: flex;
1558
+ flex-direction: column;
1559
+ position: relative;
1727
1560
  }
1728
- .ilo--card--graphic::after {
1729
- right: 0;
1730
- top: -39.7px;
1731
- transition: background-image 150ms ease-out;
1561
+ .ilo--card__type__text .ilo--card--content > * {
1562
+ justify-self: flex-start;
1732
1563
  }
1733
- .right-to-left .ilo--card--graphic::after {
1734
- left: 0;
1735
- right: auto;
1736
- transform: rotateY(180deg);
1564
+ .ilo--card__type__text .ilo--card--content > *:last-child {
1565
+ justify-self: flex-end;
1566
+ margin-bottom: 0;
1737
1567
  }
1738
- .ilo--card--graphic .ilo--profile--contents--light * {
1739
- color: rgb(45, 45, 45);
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;
1740
1584
  }
1741
- .ilo--card--graphic .ilo--profile--contents--dark * {
1742
- color: rgb(255, 255, 255);
1585
+ @media screen and (min-width: 1024px) {
1586
+ .ilo--card__type__detail {
1587
+ padding: 1.7148981779rem 0;
1588
+ }
1743
1589
  }
1744
- .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
1590
+ .ilo--card__type__detail:hover, .ilo--card__type__detail:focus, .ilo--card__type__detail:focus-within {
1745
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));
1746
1592
  }
1747
- .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents *, .ilo--card--graphic:focus-within .ilo--profile--contents * {
1748
- color: rgb(30, 45, 190);
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;
1749
1596
  }
1750
- @media screen and (min-width: 610px) {
1751
- .ilo--card--graphic {
1752
- padding: 0 1.7148981779rem 2.1436227224rem;
1753
- }
1754
- .ilo--card--graphic::before {
1755
- background: inherit;
1756
- content: "";
1757
- display: block;
1758
- height: 40px;
1759
- position: absolute;
1760
- width: calc(100% - 73px);
1761
- }
1762
- .ilo--card--graphic::after {
1763
- 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");
1764
- background-position: bottom right;
1765
- background-size: cover;
1766
- content: "";
1767
- height: 40px;
1768
- display: block;
1769
- position: absolute;
1770
- width: 73.4px;
1771
- }
1772
- .ilo--card--graphic.ilo--card--dark::after {
1773
- 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");
1774
- }
1775
- .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 {
1776
- 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");
1777
- }
1778
- .ilo--card--graphic::before {
1779
- left: 0;
1780
- top: -39.7px;
1781
- }
1782
- .right-to-left .ilo--card--graphic::before {
1783
- left: auto;
1784
- right: 0;
1785
- }
1786
- .ilo--card--graphic::after {
1787
- right: 0;
1788
- top: -39.7px;
1789
- }
1790
- .right-to-left .ilo--card--graphic::after {
1791
- left: 0;
1792
- right: auto;
1793
- transform: rotateY(180deg);
1794
- }
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;
1795
1604
  }
1796
1605
  @media screen and (min-width: 1024px) {
1797
- .ilo--card--graphic::before {
1798
- background: inherit;
1799
- content: "";
1800
- display: block;
1801
- height: 40px;
1802
- position: absolute;
1803
- width: calc(100% - 73px);
1804
- }
1805
- .ilo--card--graphic::after {
1806
- 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");
1807
- background-position: bottom right;
1808
- background-size: cover;
1809
- content: "";
1810
- height: 40px;
1811
- display: block;
1812
- position: absolute;
1813
- width: 73.4px;
1814
- }
1815
- .ilo--card--graphic.ilo--card--dark::after {
1816
- 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");
1817
- }
1818
- .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 {
1819
- 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");
1820
- }
1821
- .ilo--card--graphic::before {
1822
- left: 0;
1823
- top: -39.7px;
1824
- }
1825
- .right-to-left .ilo--card--graphic::before {
1826
- left: auto;
1827
- right: 0;
1828
- }
1829
- .ilo--card--graphic::after {
1830
- right: 0;
1831
- top: -39.7px;
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;
1832
1610
  }
1833
- .right-to-left .ilo--card--graphic::after {
1834
- left: 0;
1835
- right: auto;
1836
- transform: rotateY(180deg);
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;
1837
1615
  }
1838
1616
  }
1839
- .ilo--card--graphic.ilo--card--wide {
1840
- padding: 0 1.7148981779rem 2.1436227224rem;
1617
+ .ilo--card__type__detail.ilo--card__size__wide, .ilo--card__type__detail.ilo--card__size__fluid {
1618
+ --max-width: 39.9249732047rem;
1841
1619
  }
1842
- @media screen and (min-width: 610px) {
1843
- .ilo--card--graphic.ilo--card--wide {
1844
- padding: 0 1.7148981779rem 2.1436227224rem;
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;
1845
1625
  }
1846
1626
  }
1847
- .ilo--card--graphic.ilo--card--standard {
1848
- padding: 0 1.7148981779rem 2.1436227224rem;
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
+ }
1849
1631
  }
1850
- @media screen and (min-width: 610px) {
1851
- .ilo--card--graphic.ilo--card--standard {
1852
- padding: 0 1.7148981779rem 2.1436227224rem;
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;
1853
1635
  }
1854
1636
  }
1855
- .ilo--card--graphic.ilo--card--narrow {
1856
- padding: 0 1.2861736334rem 2.1436227224rem;
1637
+ .ilo--card__type__detail.ilo--card__size__narrow {
1638
+ --max-width: 18.3815648446rem;
1857
1639
  }
1858
- @media screen and (min-width: 610px) {
1859
- .ilo--card--graphic.ilo--card--narrow {
1860
- padding: 0 1.2861736334rem 2.1436227224rem;
1861
- }
1640
+ .ilo--card__type__detail picture {
1641
+ display: flex;
1642
+ position: relative;
1862
1643
  }
1863
- .ilo--card--graphic.ilo--card--narrow .ilo--card--title {
1864
- font-size: 18.66px;
1865
- letter-spacing: -0.035em;
1866
- line-height: 24.26px;
1867
- margin-bottom: 1.674953518rem;
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;
1868
1658
  }
1869
- .ilo--card--graphic.ilo--card--dark {
1870
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1659
+ .ilo--card__type__detail .ilo--card--wrap {
1660
+ display: flex;
1871
1661
  }
1872
- .ilo--card--graphic .ilo--card--eyebrow {
1873
- margin-bottom: 1.0110920672rem;
1662
+ .right-to-left .ilo--card__type__detail .ilo--card--wrap {
1663
+ flex-direction: row-reverse;
1874
1664
  }
1875
- .ilo--card--graphic .ilo--card--title {
1665
+ .ilo--card__type__detail .ilo--card--title {
1876
1666
  font-size: 18.66px;
1877
1667
  letter-spacing: -0.035em;
1878
1668
  line-height: 24.26px;
1879
- margin-bottom: 1.674953518rem;
1880
1669
  }
1881
- @media screen and (min-width: 610px) {
1882
- .ilo--card--graphic .ilo--card--title {
1883
- font-size: 23.32px;
1884
- letter-spacing: -0.035em;
1885
- line-height: 29.15px;
1886
- margin-bottom: 1.5763397642rem;
1887
- }
1670
+ .ilo--card__type__detail .ilo--card--image--wrapper {
1671
+ flex: 0 0 4.1264737406rem;
1888
1672
  }
1889
- .ilo--card--graphic .ilo--card--date {
1890
- display: block;
1891
- margin-bottom: 1.4398166117rem;
1673
+ .ilo--card__type__detail .ilo--card--picture {
1674
+ object-fit: contain;
1675
+ width: 4.1264737406rem;
1892
1676
  }
1893
- .ilo--card--graphic .ilo--card--content {
1894
- display: flex;
1895
- flex-direction: column;
1677
+ .ilo--card__type__detail .ilo--card--content {
1678
+ padding: 0 1.2861736334rem;
1679
+ }
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;
1896
1686
  position: relative;
1897
1687
  }
1898
- .ilo--card--graphic .ilo--card--content > * {
1899
- 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");
1900
1699
  }
1901
- .ilo--card--graphic .ilo--card--content > *:last-child {
1902
- justify-self: flex-end;
1903
- margin-bottom: 0;
1700
+ .ilo--card__type__detail .ilo--card--date {
1701
+ font-size: 16px;
1702
+ letter-spacing: normal;
1703
+ line-height: 23.36px;
1904
1704
  }
1905
- .ilo--card--graphicpromo {
1906
- 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;
1907
1718
  padding: 2.1436227224rem 1.2861736334rem;
1908
1719
  width: 100%;
1909
1720
  }
1910
- .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus, .ilo--card--graphicpromo:focus-within {
1911
- 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));
1912
- }
1913
1721
  @media screen and (min-width: 610px) {
1914
- .ilo--card--graphicpromo {
1722
+ .ilo--card__type__promo {
1915
1723
  padding: 2.5723472669rem;
1916
1724
  }
1917
1725
  }
1918
1726
  @media screen and (min-width: 1024px) {
1919
- .ilo--card--graphicpromo {
1727
+ .ilo--card__type__promo {
1920
1728
  padding: 3.4297963558rem 3.8585209003rem;
1921
1729
  }
1922
1730
  }
1923
- .ilo--card--graphicpromo.ilo--card--wide {
1924
- padding: 3.4297963558rem 3.8585209003rem;
1731
+ .ilo--card__type__promo.ilo--card__size__standard {
1732
+ --max-width: 33.9764201501rem;
1733
+ padding: 2.5723472669rem;
1925
1734
  }
1926
1735
  @media screen and (min-width: 610px) {
1927
- .ilo--card--graphicpromo.ilo--card--wide {
1928
- padding: 3.4297963558rem 3.8585209003rem;
1736
+ .ilo--card__type__promo.ilo--card__size__standard {
1737
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1929
1738
  }
1930
1739
  }
1931
1740
  @media screen and (min-width: 1024px) {
1932
- .ilo--card--graphicpromo.ilo--card--wide {
1933
- padding: 3.4297963558rem 3.8585209003rem;
1741
+ .ilo--card__type__promo.ilo--card__size__standard {
1742
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1934
1743
  }
1935
1744
  }
1936
- .ilo--card--graphicpromo.ilo--card--standard {
1937
- 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;
1938
1751
  }
1939
1752
  @media screen and (min-width: 610px) {
1940
- .ilo--card--graphicpromo.ilo--card--standard {
1941
- 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;
1942
1755
  }
1943
1756
  }
1944
1757
  @media screen and (min-width: 1024px) {
1945
- .ilo--card--graphicpromo.ilo--card--standard {
1946
- 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;
1947
1760
  }
1948
1761
  }
1949
- .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;
1950
1767
  padding: 2.1436227224rem 1.2861736334rem;
1951
1768
  }
1952
1769
  @media screen and (min-width: 610px) {
1953
- .ilo--card--graphicpromo.ilo--card--narrow {
1770
+ .ilo--card__type__promo.ilo--card__size__narrow {
1954
1771
  padding: 2.1436227224rem 1.2861736334rem;
1955
1772
  }
1956
1773
  }
1957
1774
  @media screen and (min-width: 1024px) {
1958
- .ilo--card--graphicpromo.ilo--card--narrow {
1775
+ .ilo--card__type__promo.ilo--card__size__narrow {
1959
1776
  padding: 2.1436227224rem 1.2861736334rem;
1960
1777
  }
1961
1778
  }
1962
- .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 {
1963
1783
  font-size: 29.16px;
1964
1784
  letter-spacing: -0.035em;
1965
1785
  line-height: 36.45px;
1966
1786
  margin-bottom: 0.5741425509rem;
1967
1787
  }
1968
1788
  @media screen and (min-width: 610px) {
1969
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1789
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1970
1790
  font-size: 36.45px;
1971
1791
  letter-spacing: -0.035em;
1972
1792
  line-height: 43.74px;
1973
1793
  margin-bottom: 0.4278063594rem;
1974
1794
  }
1975
1795
  }
1976
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--intro {
1796
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--intro {
1977
1797
  font-size: 16px;
1978
1798
  letter-spacing: normal;
1979
1799
  line-height: 23.36px;
1980
1800
  margin-bottom: 1.910132288rem;
1981
1801
  }
1982
- .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 {
1983
1803
  color: rgb(45, 45, 45);
1984
1804
  transition-property: color;
1985
1805
  transition-duration: 150ms;
1986
1806
  transition-timing-function: ease-out;
1987
1807
  }
1988
- .ilo--card--graphicpromo .ilo--card--title {
1808
+ .ilo--card__type__promo .ilo--card--title {
1989
1809
  font-size: 29.16px;
1990
1810
  letter-spacing: -0.035em;
1991
1811
  line-height: 36.45px;
1992
1812
  margin-bottom: 0.5741425509rem;
1993
1813
  }
1994
1814
  @media screen and (min-width: 610px) {
1995
- .ilo--card--graphicpromo .ilo--card--title {
1815
+ .ilo--card__type__promo .ilo--card--title {
1996
1816
  font-size: 36.45px;
1997
1817
  letter-spacing: -0.035em;
1998
1818
  line-height: 43.74px;
1999
1819
  margin-bottom: 0.8565309039rem;
2000
1820
  }
2001
1821
  }
2002
- .ilo--card--graphicpromo .ilo--card--intro {
1822
+ .ilo--card__type__promo .ilo--card--intro {
2003
1823
  font-size: 16px;
2004
1824
  letter-spacing: normal;
2005
1825
  line-height: 23.36px;
2006
1826
  margin-bottom: 1.910132288rem;
2007
1827
  }
2008
1828
  @media screen and (min-width: 610px) {
2009
- .ilo--card--graphicpromo .ilo--card--intro {
1829
+ .ilo--card__type__promo .ilo--card--intro {
2010
1830
  font-size: 18.66px;
2011
1831
  letter-spacing: normal;
2012
1832
  line-height: 27.24px;
2013
1833
  margin-bottom: 1.8685411561rem;
2014
1834
  }
2015
1835
  }
2016
- .ilo--card--factlist {
2017
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2018
- max-width: 45.8735262594rem;
2019
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
2020
- pointer-events: none;
2021
- }
2022
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2023
- height: 40px;
2024
- top: -2.127545552rem;
2025
- width: calc(100% - 73px);
2026
- }
2027
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2028
- height: 40px;
2029
- top: -2.127545552rem;
2030
- width: 73.3px;
2031
- }
2032
- .ilo--card--factlist.ilo--card--dark {
2033
- background: rgb(35, 0, 80);
2034
- }
2035
- @media screen and (min-width: 1024px) {
2036
- .ilo--card--factlist {
2037
- padding: 0 2.1436227224rem 3.0010718114rem 2.1436227224rem;
2038
- }
2039
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2040
- height: 48px;
2041
- top: -2.5562700965rem;
2042
- width: calc(100% - 87px);
2043
- }
2044
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2045
- height: 48px;
2046
- top: -2.5562700965rem;
2047
- width: 87.3px;
2048
- }
2049
- }
2050
- .ilo--card--factlist.ilo--card--wide {
2051
- 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;
2052
1850
  }
2053
- @media screen and (min-width: 610px) {
2054
- .ilo--card--factlist.ilo--card--wide {
2055
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
2056
- }
1851
+ .ilo--card__type__multilink .ilo--card--image--wrapper {
1852
+ display: none;
2057
1853
  }
2058
- .ilo--card--factlist.ilo--card--standard {
2059
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1854
+ .ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper {
1855
+ display: block;
2060
1856
  }
2061
1857
  @media screen and (min-width: 610px) {
2062
- .ilo--card--factlist.ilo--card--standard {
2063
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
1858
+ .ilo--card__type__multilink {
1859
+ padding: 2.1436227224rem;
2064
1860
  }
2065
1861
  }
2066
- .ilo--card--factlist.ilo--card--narrow {
2067
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
2068
- }
2069
- @media screen and (min-width: 610px) {
2070
- .ilo--card--factlist.ilo--card--narrow {
2071
- 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;
2072
1865
  }
2073
1866
  }
2074
- .ilo--card--factlist.ilo--card--dark {
2075
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2076
- }
2077
- .ilo--card--factlist.ilo--card--dark .ilo--card--title {
2078
- color: rgb(255, 255, 255);
2079
- transition-property: color;
2080
- transition-duration: 150ms;
2081
- transition-timing-function: ease-out;
2082
- }
2083
- .ilo--card--factlist.ilo--card--dark .ilo--list__item {
2084
- color: rgb(255, 255, 255);
2085
- }
2086
- .ilo--card--factlist.ilo--card--dark .ilo--list__item:last-of-type {
2087
- margin-bottom: 0;
2088
- }
2089
- .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 {
2090
- color: rgb(255, 255, 255);
2091
- transition-property: color;
2092
- transition-duration: 150ms;
2093
- transition-timing-function: ease-out;
2094
- }
2095
- .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 {
2096
- color: rgb(255, 255, 255);
2097
- }
2098
- .ilo--card--factlist .ilo--card--title {
2099
- color: rgb(45, 45, 45);
1867
+ .ilo--card__type__multilink .ilo--card--title {
2100
1868
  font-size: 23.32px;
2101
1869
  letter-spacing: -0.035em;
2102
1870
  line-height: 29.15px;
2103
- margin-bottom: 1.1476152197rem;
1871
+ margin-bottom: 0.7188906752rem;
1872
+ color: rgb(45, 45, 45);
2104
1873
  }
2105
- @media screen and (min-width: 1024px) {
2106
- .ilo--card--factlist .ilo--card--title {
1874
+ @media screen and (min-width: 610px) {
1875
+ .ilo--card__type__multilink .ilo--card--title {
2107
1876
  font-size: 29.16px;
2108
1877
  letter-spacing: -0.035em;
2109
1878
  line-height: 36.45px;
2110
- margin-bottom: 1.4315916399rem;
1879
+ margin-bottom: 0.5741425509rem;
2111
1880
  }
2112
1881
  }
2113
- .ilo--card--stat {
2114
- border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
2115
- margin-top: 2.1436227224rem;
2116
- padding: 0 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2117
- position: relative;
2118
- width: 100%;
2119
- }
2120
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2121
- left: 0;
2122
- top: -2.127545552rem;
2123
- }
2124
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2125
- left: auto;
2126
- right: 0;
2127
- }
2128
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2129
- right: 0;
2130
- top: -2.127545552rem;
2131
- }
2132
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2133
- left: 0;
2134
- right: auto;
2135
- transform: rotateY(180deg);
2136
- }
2137
- .ilo--card--stat.ilo--card--blue {
2138
- background: rgb(235, 245, 253);
2139
- }
2140
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2141
- background: inherit;
2142
- content: "";
2143
- display: block;
2144
- height: 40px;
2145
- position: absolute;
2146
- width: calc(100% - 73px);
2147
- }
2148
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2149
- 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");
2150
- background-position: bottom right;
2151
- background-size: cover;
2152
- content: "";
2153
- height: 40px;
2154
- display: block;
2155
- position: absolute;
2156
- width: 73.4px;
2157
- }
2158
- .ilo--card--stat.ilo--card--yellow {
2159
- background: rgb(255, 205, 45);
2160
- }
2161
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2162
- background: inherit;
2163
- content: "";
2164
- display: block;
2165
- height: 40px;
2166
- position: absolute;
2167
- width: calc(100% - 73px);
2168
- }
2169
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2170
- 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");
2171
- background-position: bottom right;
2172
- background-size: cover;
2173
- content: "";
2174
- height: 40px;
2175
- display: block;
2176
- position: absolute;
2177
- width: 73.4px;
2178
- }
2179
- .ilo--card--stat.ilo--card--green {
2180
- background: rgb(140, 225, 100);
2181
- }
2182
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2183
- background: inherit;
2184
- content: "";
2185
- display: block;
2186
- height: 40px;
2187
- position: absolute;
2188
- width: calc(100% - 73px);
2189
- }
2190
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2191
- 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");
2192
- background-position: bottom right;
2193
- background-size: cover;
2194
- content: "";
2195
- height: 40px;
2196
- display: block;
2197
- position: absolute;
2198
- width: 73.4px;
2199
- }
2200
- .ilo--card--stat.ilo--card--turquoise {
2201
- background: rgb(5, 210, 210);
2202
- }
2203
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2204
- background: inherit;
2205
- content: "";
2206
- display: block;
2207
- height: 40px;
2208
- position: absolute;
2209
- width: calc(100% - 73px);
2210
- }
2211
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2212
- 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");
2213
- background-position: bottom right;
2214
- background-size: cover;
2215
- content: "";
2216
- height: 40px;
2217
- display: block;
2218
- position: absolute;
2219
- width: 73.4px;
2220
- }
2221
- .ilo--card--stat .ilo--card--content {
2222
- display: flex;
2223
- flex-wrap: wrap;
2224
- height: 100%;
2225
- }
2226
- .right-to-left .ilo--card--stat .ilo--card--content {
2227
- flex-direction: row-reverse;
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);
2228
1888
  }
2229
- .ilo--card--stat .ilo--card--title {
2230
- color: rgb(35, 0, 80);
2231
- font-size: 36.45px;
2232
- letter-spacing: -0.035em;
2233
- line-height: 43.74px;
2234
- margin-bottom: 0.4278063594rem;
2235
- width: 100%;
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
+ }
2236
1896
  }
2237
- .ilo--card--stat .ilo--card--intro {
2238
- color: rgb(35, 0, 80);
2239
- font-family: Overpass;
2240
- font-size: 18.66px;
2241
- letter-spacing: normal;
2242
- line-height: 27.24px;
2243
- margin-bottom: 1.6734954235rem;
2244
- width: 100%;
1897
+ .ilo--card__type__multilink.ilo--card__size__standard {
1898
+ --max-width: 28.7245444802rem;
1899
+ padding: 2.5723472669rem 2.1436227224rem;
2245
1900
  }
2246
- .ilo--card--stat .ilo--link {
2247
- font-size: 11.94px;
2248
- letter-spacing: -0.02em;
2249
- line-height: 16.24px;
2250
- align-self: flex-end;
1901
+ @media screen and (min-width: 610px) {
1902
+ .ilo--card__type__multilink.ilo--card__size__standard {
1903
+ padding: 2.5723472669rem 2.1436227224rem;
1904
+ }
2251
1905
  }
2252
- .ilo--card--data {
2253
- background: rgb(235, 245, 253);
2254
- border-bottom: 0.1607717042rem solid #82afdc;
2255
- margin-top: 2.1436227224rem;
2256
- max-width: 32.154340836rem;
2257
- padding: 0 1.2861736334rem 3.0010718114rem;
2258
- position: relative;
1906
+ @media screen and (min-width: 1024px) {
1907
+ .ilo--card__type__multilink.ilo--card__size__standard {
1908
+ padding: 2.5723472669rem 2.1436227224rem;
1909
+ }
2259
1910
  }
2260
- .ilo--card--data::before {
2261
- background: inherit;
2262
- content: "";
2263
- display: block;
2264
- height: 40px;
2265
- position: absolute;
2266
- 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;
2267
1914
  }
2268
- .ilo--card--data::after {
2269
- 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");
2270
- background-position: bottom right;
2271
- background-size: cover;
2272
- content: "";
2273
- height: 40px;
2274
- display: block;
2275
- position: absolute;
2276
- 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
+ }
2277
1919
  }
2278
- .ilo--card--data:hover, .ilo--card--data:focus, .ilo--card--data:focus-within {
2279
- background: rgb(235, 245, 253);
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
+ }
2280
1924
  }
2281
- .ilo--card--data::before {
2282
- left: 0;
2283
- top: -2.127545552rem;
1925
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper {
1926
+ display: none;
2284
1927
  }
2285
- .right-to-left .ilo--card--data::before {
2286
- left: auto;
2287
- right: 0;
1928
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper {
1929
+ display: block;
1930
+ margin-bottom: 1.2861736334rem;
2288
1931
  }
2289
- .ilo--card--data::after {
2290
- right: 0;
2291
- top: -2.127545552rem;
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
+ }
2292
1939
  }
2293
- .right-to-left .ilo--card--data::after {
2294
- left: 0;
2295
- right: auto;
2296
- transform: rotateY(180deg);
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
+ }
1947
+ }
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;
2297
1951
  }
2298
1952
  @media screen and (min-width: 610px) {
2299
- .ilo--card--data::before {
2300
- background: inherit;
2301
- content: "";
2302
- display: block;
2303
- height: 48px;
2304
- position: absolute;
2305
- width: calc(100% - 84px);
1953
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1954
+ padding: 3.0010718114rem 2.5723472669rem;
2306
1955
  }
2307
- .ilo--card--data::after {
2308
- 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");
2309
- background-position: bottom right;
2310
- background-size: cover;
2311
- content: "";
2312
- height: 48px;
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 {
2313
1970
  display: block;
2314
- position: absolute;
2315
- width: 84.4px;
1971
+ width: 50%;
2316
1972
  }
2317
- .ilo--card--data::before {
2318
- top: -2.5562700965rem;
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%;
2319
1975
  }
2320
- .ilo--card--data::after {
2321
- top: -2.5562700965rem;
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;
2322
1978
  }
2323
1979
  }
2324
- .ilo--card--data .ilo--card--image--wrapper {
2325
- display: none;
2326
- width: max(10.9860664523rem, 50%);
1980
+ .ilo--card__type__multilink .ilo--link-list {
1981
+ margin-top: 1.8756698821rem;
1982
+ position: relative;
1983
+ z-index: 3;
2327
1984
  }
2328
- .ilo--card--data .ilo--card--content .ilo--card--image--wrapper {
2329
- display: block;
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;
1998
+ background: rgb(235, 245, 253);
1999
+ border-bottom: 0.1607717042rem solid #82afdc;
2000
+ margin-top: 2.1436227224rem;
2001
+ padding: 1.2861736334rem 3.0010718114rem;
2002
+ position: relative;
2003
+ width: 100%;
2004
+ }
2005
+ .ilo--card__type__data:hover, .ilo--card__type__data:focus, .ilo--card__type__data:focus-within {
2006
+ background: rgb(235, 245, 253);
2007
+ }
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%);
2011
+ }
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%);
2015
+ }
2016
+ .ilo--card__type__data .ilo--card--image--wrapper {
2017
+ width: max(10.9860664523rem, 50%);
2330
2018
  }
2331
- .ilo--card--data--content-label {
2019
+ .ilo--card__type__data--content-label {
2332
2020
  font-size: 14.93px;
2333
2021
  letter-spacing: normal;
2334
2022
  line-height: 20.3px;
2335
2023
  margin-bottom: 0.6540478038rem;
2336
2024
  color: rgb(109, 109, 109);
2337
2025
  }
2338
- .ilo--card--data--content-copy {
2026
+ .ilo--card__type__data--content-copy {
2339
2027
  font-size: 23.32px;
2340
2028
  letter-spacing: -0.035em;
2341
2029
  line-height: 29.15px;
@@ -2344,175 +2032,161 @@ body {
2344
2032
  font-family: Overpass;
2345
2033
  font-weight: 500;
2346
2034
  }
2347
- .ilo--card--data--content-files {
2035
+ .ilo--card__type__data--content-files {
2348
2036
  margin-bottom: 2.1436227224rem;
2349
2037
  }
2350
- .ilo--card--data .ilo--link {
2038
+ .ilo--card__type__data .ilo--link {
2351
2039
  font-size: 18.66px;
2352
2040
  letter-spacing: -0.035em;
2353
2041
  line-height: 24.26px;
2354
2042
  }
2355
- .ilo--card--data--file {
2043
+ .ilo--card__type__data--file {
2356
2044
  margin: 0.2143622722rem 0.4287245445rem 0.2143622722rem 0;
2357
2045
  }
2358
- .ilo--card--data--file:last-of-type {
2046
+ .ilo--card__type__data--file:last-of-type {
2359
2047
  margin-right: 0;
2360
2048
  }
2361
- .ilo--card--feature {
2362
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2363
- display: flex;
2364
- 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;
2365
2064
  position: relative;
2065
+ width: 100%;
2066
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2366
2067
  }
2367
- .ilo--card--feature::before {
2368
- display: none;
2068
+ .ilo--card__type__stat.ilo--card__color__blue {
2069
+ background: rgb(235, 245, 253);
2369
2070
  }
2370
- .ilo--card--feature.ilo--card--dark {
2371
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2071
+ .ilo--card__type__stat.ilo--card__color__yellow {
2072
+ background: rgb(255, 205, 45);
2372
2073
  }
2373
- .ilo--card--feature.ilo--card--dark .ilo--link-list {
2374
- 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);
2375
2076
  }
2376
- .ilo--card--feature.ilo--card--dark .ilo--link-list--link {
2377
- color: rgb(255, 255, 255);
2378
- 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);
2379
2079
  }
2380
- .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 {
2381
- color: rgb(30, 45, 190);
2382
- 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%;
2383
2084
  }
2384
- .ilo--card--feature picture::before {
2385
- transition-property: opacity;
2386
- transition-duration: 150ms;
2387
- transition-timing-function: ease-out;
2085
+ .right-to-left .ilo--card__type__stat .ilo--card--content {
2086
+ flex-direction: row-reverse;
2388
2087
  }
2389
- .ilo--card--feature:hover, .ilo--card--feature:focus, .ilo--card--feature:focus-within {
2390
- background-color: rgb(255, 255, 255);
2391
- 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));
2392
- 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%;
2393
2095
  }
2394
- .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before, .ilo--card--feature:focus-within picture::before {
2395
- opacity: 0.4;
2396
- z-index: 1;
2397
- transition-property: opacity;
2398
- transition-duration: 150ms;
2399
- 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%;
2400
2104
  }
2401
- .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image, .ilo--card--feature:focus-within .ilo--card--image {
2402
- 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;
2403
2110
  }
2404
- .ilo--card--feature .ilo--link-list {
2405
- border-top: 0.1071811361rem solid rgb(237, 240, 242);
2406
- margin-left: -1.2861736334rem;
2407
- margin-right: -1.2861736334rem;
2408
- margin-top: 1.822079314rem;
2409
- position: relative;
2410
- 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%);
2411
2127
  }
2412
- .ilo--card--feature .ilo--link-list--link, .ilo--card--feature .ilo--link-list--link:hover {
2413
- border-bottom: none;
2414
- padding-left: 1.2861736334rem;
2415
- padding-right: 1.2861736334rem;
2128
+ @media screen and (min-width: 1024px) {
2129
+ .ilo--card__type__factlist {
2130
+ padding: 2.1436227224rem 3.0010718114rem;
2131
+ }
2416
2132
  }
2417
- .ilo--card--feature.ilo--card--narrow .ilo--card--wrap, .ilo--card--feature.ilo--card--standard .ilo--card--wrap {
2418
- display: flex;
2419
- flex-wrap: wrap;
2420
- width: 100%;
2133
+ .ilo--card__type__factlist.ilo--card__size__wide {
2134
+ --max-width: 45.8735262594rem;
2135
+ padding: 2.1436227224rem 2.7867095391rem;
2421
2136
  }
2422
- .ilo--card--feature.ilo--card--narrow .ilo--card--content, .ilo--card--feature.ilo--card--standard .ilo--card--content {
2423
- 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
+ }
2424
2142
  }
2425
- .ilo--card--feature.ilo--card--narrow .ilo--card--image--wrapper, .ilo--card--feature.ilo--card--standard .ilo--card--image--wrapper {
2426
- 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%);
2427
2147
  }
2428
2148
  @media screen and (min-width: 610px) {
2429
- .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2430
- flex-direction: row;
2431
- }
2432
- .right-to-left .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2433
- flex-direction: row-reverse;
2434
- }
2435
- .ilo--card--feature.ilo--card--wide .ilo--card--content {
2436
- display: flex;
2437
- flex-direction: row;
2438
- flex-wrap: wrap;
2439
- position: relative;
2440
- width: 50%;
2441
- }
2442
- .ilo--card--feature.ilo--card--wide .ilo--card--image--wrapper {
2443
- width: 50%;
2444
- }
2445
- .ilo--card--feature.ilo--card--wide .ilo--card--image {
2446
- object-fit: cover;
2447
- }
2448
- .ilo--card--feature.ilo--card--wide .ilo--card--date {
2449
- align-self: flex-end;
2450
- width: 100%;
2451
- }
2452
- .ilo--card--feature.ilo--card--wide .ilo--card--eyebrow {
2453
- width: 100%;
2454
- }
2455
- .ilo--card--feature.ilo--card--wide .ilo--card--title {
2456
- width: 100%;
2457
- }
2458
- .ilo--card--feature.ilo--card--wide .ilo--link-list {
2459
- width: calc(100% + 48px);
2149
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2150
+ padding: 1.2861736334rem 2.5723472669rem;
2460
2151
  }
2461
2152
  }
2462
- .ilo--card--feature .ilo--card--wrap {
2463
- display: flex;
2464
- flex-direction: column;
2465
- width: 100%;
2153
+ .ilo--card__type__factlist.ilo--card__theme__dark {
2154
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2466
2155
  }
2467
- .ilo--card--feature picture {
2468
- display: flex;
2469
- height: 100%;
2470
- position: relative;
2156
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--card--title {
2157
+ color: rgb(255, 255, 255);
2471
2158
  }
2472
- .ilo--card--feature picture::before {
2473
- background-color: rgb(30, 45, 190);
2474
- content: "";
2475
- display: block;
2476
- height: 100%;
2477
- left: 0;
2478
- opacity: 0;
2479
- position: absolute;
2480
- top: 0;
2481
- transition: opacity 150ms ease-in-out;
2482
- width: 100%;
2483
- z-index: -1;
2159
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item {
2160
+ color: rgb(255, 255, 255);
2484
2161
  }
2485
- .ilo--card--feature .ilo--card--content {
2486
- display: flex;
2487
- flex: 1 1 auto;
2488
- flex-direction: column;
2489
- 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;
2490
2164
  }
2491
- .ilo--card--feature.ilo--card--linklist .ilo--card--content {
2492
- 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);
2167
+ }
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);
2493
2170
  }
2494
- .ilo--card--feature .ilo--card--title {
2171
+ .ilo--card__type__factlist .ilo--card--title {
2172
+ color: rgb(45, 45, 45);
2495
2173
  font-size: 23.32px;
2496
2174
  letter-spacing: -0.035em;
2497
2175
  line-height: 29.15px;
2498
- margin-bottom: 1.5763397642rem;
2499
- font-family: Overpass;
2500
- font-weight: 700;
2501
- }
2502
- .ilo--card--feature .ilo--card--eyebrow {
2503
- font-size: 14.93px;
2504
- letter-spacing: normal;
2505
- line-height: 19.71px;
2506
- margin-bottom: 0.3376482577rem;
2176
+ margin-bottom: 1.1476152197rem;
2507
2177
  }
2508
- .ilo--card--feature .ilo--card--date {
2509
- margin-bottom: 0;
2510
- 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
+ }
2511
2185
  }
2512
2186
 
2513
2187
  /**
2514
2188
  * Do not edit directly
2515
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2189
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2516
2190
  */
2517
2191
  /**
2518
2192
  * TOKENS:
@@ -2520,34 +2194,29 @@ body {
2520
2194
  /**
2521
2195
  * MAPS:
2522
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
+ }
2523
2209
  .ilo--cardgroup--inner {
2524
2210
  display: flex;
2525
- flex-wrap: wrap;
2526
- justify-content: space-between;
2211
+ flex-flow: row wrap;
2212
+ justify-content: center;
2527
2213
  margin: auto;
2528
- row-gap: 1.7148981779rem;
2214
+ gap: 1.7148981779rem;
2215
+ width: 100%;
2529
2216
  }
2530
2217
  .right-to-left .ilo--cardgroup--inner {
2531
2218
  flex-direction: row-reverse;
2532
2219
  }
2533
- .ilo--cardgroup--inner .ilo--card {
2534
- width: 100%;
2535
- }
2536
- @media screen and (min-width: 1024px) {
2537
- .ilo--cardgroup--two .ilo--card {
2538
- width: calc(50% - 24px);
2539
- }
2540
- }
2541
- @media screen and (min-width: 1024px) {
2542
- .ilo--cardgroup--three .ilo--card {
2543
- width: calc(33.333% - 24px);
2544
- }
2545
- }
2546
- @media screen and (min-width: 1024px) {
2547
- .ilo--cardgroup--four .ilo--card {
2548
- width: calc(25% - 24px);
2549
- }
2550
- }
2551
2220
  .ilo--cardgroup--button-wrap {
2552
2221
  display: flex;
2553
2222
  justify-content: center;
@@ -2557,7 +2226,7 @@ body {
2557
2226
 
2558
2227
  /**
2559
2228
  * Do not edit directly
2560
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2229
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2561
2230
  */
2562
2231
  /**
2563
2232
  * TOKENS:
@@ -2662,7 +2331,7 @@ body {
2662
2331
 
2663
2332
  /**
2664
2333
  * Do not edit directly
2665
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2334
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2666
2335
  */
2667
2336
  /**
2668
2337
  * TOKENS:
@@ -2743,7 +2412,7 @@ body {
2743
2412
 
2744
2413
  /**
2745
2414
  * Do not edit directly
2746
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2415
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2747
2416
  */
2748
2417
  /**
2749
2418
  * TOKENS:
@@ -2753,7 +2422,7 @@ body {
2753
2422
  */
2754
2423
  /**
2755
2424
  * Do not edit directly
2756
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2425
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2757
2426
  */
2758
2427
  /**
2759
2428
  * TOKENS:
@@ -2763,7 +2432,7 @@ body {
2763
2432
  */
2764
2433
  /**
2765
2434
  * Do not edit directly
2766
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2435
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2767
2436
  */
2768
2437
  /**
2769
2438
  * TOKENS:
@@ -2773,7 +2442,7 @@ body {
2773
2442
  */
2774
2443
  /**
2775
2444
  * Do not edit directly
2776
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2445
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2777
2446
  */
2778
2447
  /**
2779
2448
  * TOKENS:
@@ -2899,7 +2568,7 @@ body {
2899
2568
 
2900
2569
  /**
2901
2570
  * Do not edit directly
2902
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2571
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2903
2572
  */
2904
2573
  /**
2905
2574
  * TOKENS:
@@ -2927,7 +2596,7 @@ body {
2927
2596
 
2928
2597
  /**
2929
2598
  * Do not edit directly
2930
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2599
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2931
2600
  */
2932
2601
  /**
2933
2602
  * TOKENS:
@@ -3015,7 +2684,7 @@ body {
3015
2684
 
3016
2685
  /**
3017
2686
  * Do not edit directly
3018
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2687
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3019
2688
  */
3020
2689
  /**
3021
2690
  * TOKENS:
@@ -3025,7 +2694,7 @@ body {
3025
2694
  */
3026
2695
  /**
3027
2696
  * Do not edit directly
3028
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2697
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3029
2698
  */
3030
2699
  /**
3031
2700
  * TOKENS:
@@ -3035,7 +2704,7 @@ body {
3035
2704
  */
3036
2705
  /**
3037
2706
  * Do not edit directly
3038
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2707
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3039
2708
  */
3040
2709
  /**
3041
2710
  * TOKENS:
@@ -3088,7 +2757,7 @@ body {
3088
2757
 
3089
2758
  /**
3090
2759
  * Do not edit directly
3091
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2760
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3092
2761
  */
3093
2762
  /**
3094
2763
  * TOKENS:
@@ -3163,7 +2832,7 @@ body {
3163
2832
 
3164
2833
  /**
3165
2834
  * Do not edit directly
3166
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2835
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3167
2836
  */
3168
2837
  /**
3169
2838
  * TOKENS:
@@ -3269,7 +2938,7 @@ body {
3269
2938
 
3270
2939
  /**
3271
2940
  * Do not edit directly
3272
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2941
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3273
2942
  */
3274
2943
  /**
3275
2944
  * TOKENS:
@@ -3292,7 +2961,7 @@ body {
3292
2961
 
3293
2962
  /**
3294
2963
  * Do not edit directly
3295
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2964
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3296
2965
  */
3297
2966
  /**
3298
2967
  * TOKENS:
@@ -3306,7 +2975,7 @@ body {
3306
2975
 
3307
2976
  /**
3308
2977
  * Do not edit directly
3309
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2978
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3310
2979
  */
3311
2980
  /**
3312
2981
  * TOKENS:
@@ -3316,7 +2985,7 @@ body {
3316
2985
  */
3317
2986
  /**
3318
2987
  * Do not edit directly
3319
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2988
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3320
2989
  */
3321
2990
  /**
3322
2991
  * TOKENS:
@@ -3341,7 +3010,7 @@ body {
3341
3010
  }
3342
3011
  /**
3343
3012
  * Do not edit directly
3344
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3013
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3345
3014
  */
3346
3015
  /**
3347
3016
  * TOKENS:
@@ -3665,7 +3334,7 @@ body {
3665
3334
 
3666
3335
  /**
3667
3336
  * Do not edit directly
3668
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3337
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3669
3338
  */
3670
3339
  /**
3671
3340
  * TOKENS:
@@ -3788,7 +3457,7 @@ body {
3788
3457
 
3789
3458
  /**
3790
3459
  * Do not edit directly
3791
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3460
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3792
3461
  */
3793
3462
  /**
3794
3463
  * TOKENS:
@@ -3994,7 +3663,7 @@ body {
3994
3663
 
3995
3664
  /**
3996
3665
  * Do not edit directly
3997
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3666
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3998
3667
  */
3999
3668
  /**
4000
3669
  * TOKENS:
@@ -4005,7 +3674,7 @@ body {
4005
3674
  .ilo--hero-card {
4006
3675
  height: 100%;
4007
3676
  position: relative;
4008
- padding: 39px 16px;
3677
+ padding: 40px 16px;
4009
3678
  }
4010
3679
  @media screen and (min-width: 1024px) {
4011
3680
  .ilo--hero-card {
@@ -4050,12 +3719,7 @@ body {
4050
3719
  }
4051
3720
  }
4052
3721
  .ilo--hero-card__cornercut {
4053
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 39px, 100% 100%, 0 100%);
4054
- }
4055
- @media screen and (min-width: 1024px) {
4056
- .ilo--hero-card__cornercut {
4057
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
4058
- }
3722
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
4059
3723
  }
4060
3724
  .ilo--hero-card--datecopy {
4061
3725
  font-size: 16px;
@@ -4120,7 +3784,7 @@ body {
4120
3784
 
4121
3785
  /**
4122
3786
  * Do not edit directly
4123
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3787
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4124
3788
  */
4125
3789
  /**
4126
3790
  * TOKENS:
@@ -4176,7 +3840,7 @@ body {
4176
3840
 
4177
3841
  /**
4178
3842
  * Do not edit directly
4179
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3843
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4180
3844
  */
4181
3845
  /**
4182
3846
  * TOKENS:
@@ -4318,7 +3982,7 @@ body {
4318
3982
 
4319
3983
  /**
4320
3984
  * Do not edit directly
4321
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3985
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4322
3986
  */
4323
3987
  /**
4324
3988
  * TOKENS:
@@ -4328,7 +3992,7 @@ body {
4328
3992
  */
4329
3993
  /**
4330
3994
  * Do not edit directly
4331
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3995
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4332
3996
  */
4333
3997
  /**
4334
3998
  * TOKENS:
@@ -4353,7 +4017,7 @@ body {
4353
4017
  }
4354
4018
  /**
4355
4019
  * Do not edit directly
4356
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4020
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4357
4021
  */
4358
4022
  /**
4359
4023
  * TOKENS:
@@ -4511,7 +4175,7 @@ body {
4511
4175
 
4512
4176
  /**
4513
4177
  * Do not edit directly
4514
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4178
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4515
4179
  */
4516
4180
  /**
4517
4181
  * TOKENS:
@@ -4606,7 +4270,7 @@ body {
4606
4270
 
4607
4271
  /**
4608
4272
  * Do not edit directly
4609
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4273
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4610
4274
  */
4611
4275
  /**
4612
4276
  * TOKENS:
@@ -4616,7 +4280,7 @@ body {
4616
4280
  */
4617
4281
  /**
4618
4282
  * Do not edit directly
4619
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4283
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4620
4284
  */
4621
4285
  /**
4622
4286
  * TOKENS:
@@ -4626,7 +4290,7 @@ body {
4626
4290
  */
4627
4291
  /**
4628
4292
  * Do not edit directly
4629
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4293
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4630
4294
  */
4631
4295
  /**
4632
4296
  * TOKENS:
@@ -4797,7 +4461,7 @@ body {
4797
4461
 
4798
4462
  /**
4799
4463
  * Do not edit directly
4800
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4464
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4801
4465
  */
4802
4466
  /**
4803
4467
  * TOKENS:
@@ -4844,7 +4508,7 @@ body {
4844
4508
 
4845
4509
  /**
4846
4510
  * Do not edit directly
4847
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4511
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4848
4512
  */
4849
4513
  /**
4850
4514
  * TOKENS:
@@ -4854,7 +4518,7 @@ body {
4854
4518
  */
4855
4519
  /**
4856
4520
  * Do not edit directly
4857
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4521
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4858
4522
  */
4859
4523
  /**
4860
4524
  * TOKENS:
@@ -4864,7 +4528,7 @@ body {
4864
4528
  */
4865
4529
  /**
4866
4530
  * Do not edit directly
4867
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4531
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4868
4532
  */
4869
4533
  /**
4870
4534
  * TOKENS:
@@ -4961,7 +4625,7 @@ body {
4961
4625
 
4962
4626
  /**
4963
4627
  * Do not edit directly
4964
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4628
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4965
4629
  */
4966
4630
  /**
4967
4631
  * TOKENS:
@@ -5851,7 +5515,7 @@ body {
5851
5515
 
5852
5516
  /**
5853
5517
  * Do not edit directly
5854
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5518
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5855
5519
  */
5856
5520
  /**
5857
5521
  * TOKENS:
@@ -5861,7 +5525,7 @@ body {
5861
5525
  */
5862
5526
  /**
5863
5527
  * Do not edit directly
5864
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5528
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5865
5529
  */
5866
5530
  /**
5867
5531
  * TOKENS:
@@ -5871,7 +5535,7 @@ body {
5871
5535
  */
5872
5536
  /**
5873
5537
  * Do not edit directly
5874
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5538
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5875
5539
  */
5876
5540
  /**
5877
5541
  * TOKENS:
@@ -6063,7 +5727,7 @@ body {
6063
5727
 
6064
5728
  /**
6065
5729
  * Do not edit directly
6066
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5730
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6067
5731
  */
6068
5732
  /**
6069
5733
  * TOKENS:
@@ -6203,7 +5867,7 @@ body {
6203
5867
 
6204
5868
  /**
6205
5869
  * Do not edit directly
6206
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5870
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6207
5871
  */
6208
5872
  /**
6209
5873
  * TOKENS:
@@ -6213,7 +5877,7 @@ body {
6213
5877
  */
6214
5878
  /**
6215
5879
  * Do not edit directly
6216
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5880
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6217
5881
  */
6218
5882
  /**
6219
5883
  * TOKENS:
@@ -6238,7 +5902,7 @@ body {
6238
5902
  }
6239
5903
  /**
6240
5904
  * Do not edit directly
6241
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5905
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6242
5906
  */
6243
5907
  /**
6244
5908
  * TOKENS:
@@ -6405,7 +6069,7 @@ body {
6405
6069
 
6406
6070
  /**
6407
6071
  * Do not edit directly
6408
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6072
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6409
6073
  */
6410
6074
  /**
6411
6075
  * TOKENS:
@@ -6512,7 +6176,7 @@ body {
6512
6176
 
6513
6177
  /**
6514
6178
  * Do not edit directly
6515
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6179
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6516
6180
  */
6517
6181
  /**
6518
6182
  * TOKENS:
@@ -6522,7 +6186,7 @@ body {
6522
6186
  */
6523
6187
  /**
6524
6188
  * Do not edit directly
6525
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6189
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6526
6190
  */
6527
6191
  /**
6528
6192
  * TOKENS:
@@ -6547,7 +6211,7 @@ body {
6547
6211
  }
6548
6212
  /**
6549
6213
  * Do not edit directly
6550
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6214
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6551
6215
  */
6552
6216
  /**
6553
6217
  * TOKENS:
@@ -6608,7 +6272,7 @@ body {
6608
6272
 
6609
6273
  /**
6610
6274
  * Do not edit directly
6611
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6275
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6612
6276
  */
6613
6277
  /**
6614
6278
  * TOKENS:
@@ -7023,7 +6687,7 @@ body {
7023
6687
 
7024
6688
  /**
7025
6689
  * Do not edit directly
7026
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6690
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7027
6691
  */
7028
6692
  /**
7029
6693
  * TOKENS:
@@ -7077,7 +6741,7 @@ body {
7077
6741
 
7078
6742
  /**
7079
6743
  * Do not edit directly
7080
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6744
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7081
6745
  */
7082
6746
  /**
7083
6747
  * TOKENS:
@@ -7235,7 +6899,7 @@ body {
7235
6899
 
7236
6900
  /**
7237
6901
  * Do not edit directly
7238
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6902
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7239
6903
  */
7240
6904
  /**
7241
6905
  * TOKENS:
@@ -7586,7 +7250,7 @@ body {
7586
7250
 
7587
7251
  /**
7588
7252
  * Do not edit directly
7589
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7253
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7590
7254
  */
7591
7255
  /**
7592
7256
  * TOKENS:
@@ -7772,7 +7436,7 @@ body {
7772
7436
 
7773
7437
  /**
7774
7438
  * Do not edit directly
7775
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7439
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7776
7440
  */
7777
7441
  /**
7778
7442
  * TOKENS:
@@ -7830,7 +7494,7 @@ body {
7830
7494
 
7831
7495
  /**
7832
7496
  * Do not edit directly
7833
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7497
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7834
7498
  */
7835
7499
  /**
7836
7500
  * TOKENS:
@@ -8004,7 +7668,7 @@ body {
8004
7668
 
8005
7669
  /**
8006
7670
  * Do not edit directly
8007
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7671
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8008
7672
  */
8009
7673
  /**
8010
7674
  * TOKENS:
@@ -8179,7 +7843,7 @@ body {
8179
7843
 
8180
7844
  /**
8181
7845
  * Do not edit directly
8182
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7846
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8183
7847
  */
8184
7848
  /**
8185
7849
  * TOKENS:
@@ -9089,7 +8753,7 @@ body {
9089
8753
 
9090
8754
  /**
9091
8755
  * Do not edit directly
9092
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
8756
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9093
8757
  */
9094
8758
  /**
9095
8759
  * TOKENS:
@@ -9099,7 +8763,7 @@ body {
9099
8763
  */
9100
8764
  /**
9101
8765
  * Do not edit directly
9102
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
8766
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9103
8767
  */
9104
8768
  /**
9105
8769
  * TOKENS:
@@ -9124,7 +8788,7 @@ body {
9124
8788
  }
9125
8789
  /**
9126
8790
  * Do not edit directly
9127
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
8791
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9128
8792
  */
9129
8793
  /**
9130
8794
  * TOKENS: