@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
package/build/css/index.css CHANGED
@@ -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:
@@ -169,7 +169,7 @@ body {
169
169
 
170
170
  /**
171
171
  * Do not edit directly
172
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
172
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
173
173
  */
174
174
  /**
175
175
  * TOKENS:
@@ -288,7 +288,7 @@ body {
288
288
 
289
289
  /**
290
290
  * Do not edit directly
291
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
291
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
292
292
  */
293
293
  /**
294
294
  * TOKENS:
@@ -313,7 +313,7 @@ body {
313
313
  }
314
314
  /**
315
315
  * Do not edit directly
316
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
316
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
317
317
  */
318
318
  /**
319
319
  * TOKENS:
@@ -567,7 +567,7 @@ body {
567
567
 
568
568
  /**
569
569
  * Do not edit directly
570
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
570
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
571
571
  */
572
572
  /**
573
573
  * TOKENS:
@@ -577,7 +577,7 @@ body {
577
577
  */
578
578
  /**
579
579
  * Do not edit directly
580
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
580
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
581
581
  */
582
582
  /**
583
583
  * TOKENS:
@@ -602,7 +602,7 @@ body {
602
602
  }
603
603
  /**
604
604
  * Do not edit directly
605
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
605
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
606
606
  */
607
607
  /**
608
608
  * TOKENS:
@@ -892,7 +892,7 @@ body {
892
892
 
893
893
  /**
894
894
  * Do not edit directly
895
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
895
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
896
896
  */
897
897
  /**
898
898
  * TOKENS:
@@ -1022,7 +1022,7 @@ body {
1022
1022
 
1023
1023
  /**
1024
1024
  * Do not edit directly
1025
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
1025
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1026
1026
  */
1027
1027
  /**
1028
1028
  * TOKENS:
@@ -1031,38 +1031,75 @@ body {
1031
1031
  * MAPS:
1032
1032
  */
1033
1033
  .ilo--card {
1034
- margin: 0;
1035
- max-width: 49.3033226152rem;
1034
+ box-sizing: border-box;
1035
+ position: relative;
1036
+ max-width: var(--max-width);
1037
+ flex: 1 1 var(--max-width);
1038
+ }
1039
+ .ilo--card__size__fluid {
1040
+ --max-width: 100% !important;
1036
1041
  }
1037
1042
  .right-to-left .ilo--card {
1038
1043
  text-align: right;
1039
1044
  }
1040
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat), .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat), .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) {
1045
+ .ilo--card__action:hover, .ilo--card__action:focus, .ilo--card__action:focus-within {
1041
1046
  background: rgb(255, 255, 255);
1042
- color: rgb(30, 45, 190);
1043
1047
  outline: none;
1044
1048
  text-decoration: none;
1045
1049
  }
1046
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist), .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat).ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(.ilo--card--factlist) {
1050
+ .ilo--card__action:hover.ilo--card__dark, .ilo--card__action:focus.ilo--card__dark, .ilo--card__action:focus-within.ilo--card__dark {
1047
1051
  background: rgb(255, 255, 255);
1048
1052
  }
1049
- .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 {
1050
- 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");
1051
- }
1052
- .ilo--card--action:hover:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow, .ilo--card--action:focus:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow, .ilo--card--action:focus-within:not(.ilo--card--data):not(.ilo--card--stat) .ilo--card--eyebrow {
1053
+ .ilo--card__action:hover .ilo--card--eyebrow,
1054
+ .ilo--card__action:hover .ilo--card--title,
1055
+ .ilo--card__action:hover .ilo--card--intro,
1056
+ .ilo--card__action:hover .ilo--card--date,
1057
+ .ilo--card__action:hover .ilo--card--date-extra, .ilo--card__action:focus .ilo--card--eyebrow,
1058
+ .ilo--card__action:focus .ilo--card--title,
1059
+ .ilo--card__action:focus .ilo--card--intro,
1060
+ .ilo--card__action:focus .ilo--card--date,
1061
+ .ilo--card__action:focus .ilo--card--date-extra, .ilo--card__action:focus-within .ilo--card--eyebrow,
1062
+ .ilo--card__action:focus-within .ilo--card--title,
1063
+ .ilo--card__action:focus-within .ilo--card--intro,
1064
+ .ilo--card__action:focus-within .ilo--card--date,
1065
+ .ilo--card__action:focus-within .ilo--card--date-extra {
1053
1066
  color: rgb(30, 45, 190);
1054
1067
  }
1055
- .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 {
1056
- color: rgb(30, 45, 190);
1068
+ .ilo--card__theme__light {
1069
+ background: rgb(255, 255, 255);
1057
1070
  }
1058
- .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 {
1059
- color: rgb(30, 45, 190);
1071
+ .ilo--card__theme__dark {
1072
+ background: rgb(35, 0, 80);
1073
+ transition: background 150ms ease-out;
1060
1074
  }
1061
- .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 {
1062
- color: rgb(30, 45, 190);
1075
+ .ilo--card__theme__dark .ilo--card--eyebrow,
1076
+ .ilo--card__theme__dark .ilo--card--title,
1077
+ .ilo--card__theme__dark .ilo--card--intro,
1078
+ .ilo--card__theme__dark .ilo--card--date,
1079
+ .ilo--card__theme__dark .ilo--card--eventdate {
1080
+ color: rgb(237, 240, 242);
1081
+ transition: color 150ms ease-out;
1063
1082
  }
1064
- .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 {
1065
- color: rgb(30, 45, 190);
1083
+ .ilo--card__isvideo .ilo--card--image--wrapper {
1084
+ position: relative;
1085
+ }
1086
+ .ilo--card__isvideo .ilo--card--image--wrapper::before {
1087
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(237, 240, 242)' d='M22 11.9999L4 2V22L22 11.9999Z'/%3e%3c/svg%3e");
1088
+ background-color: rgb(45, 45, 45);
1089
+ background-position: center;
1090
+ background-size: 18px 20px;
1091
+ background-repeat: no-repeat;
1092
+ content: "";
1093
+ display: block;
1094
+ height: 40px;
1095
+ left: 0;
1096
+ position: absolute;
1097
+ top: 0;
1098
+ width: 40px;
1099
+ z-index: 1;
1100
+ }
1101
+ .ilo--card--wrapper:hover, .ilo--card--wrapper:focus, .ilo--card--wrapper:focus-within {
1102
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1066
1103
  }
1067
1104
  .ilo--card--link {
1068
1105
  background: none;
@@ -1084,6 +1121,21 @@ body {
1084
1121
  transition-duration: 150ms;
1085
1122
  transition-timing-function: ease-out;
1086
1123
  }
1124
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--eyebrow, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--eyebrow, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--eyebrow {
1125
+ color: rgb(30, 45, 190);
1126
+ }
1127
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--title, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--title, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--title {
1128
+ color: rgb(30, 45, 190);
1129
+ }
1130
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--intro, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--intro, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--intro {
1131
+ color: rgb(30, 45, 190);
1132
+ }
1133
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--date, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--date, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--date {
1134
+ color: rgb(30, 45, 190);
1135
+ }
1136
+ .ilo--card--link:hover + .ilo--card--wrap .ilo--card--eventdate, .ilo--card--link:focus + .ilo--card--wrap .ilo--card--eventdate, .ilo--card--link:focus-within + .ilo--card--wrap .ilo--card--eventdate {
1137
+ color: rgb(30, 45, 190);
1138
+ }
1087
1139
  .ilo--card--link--text {
1088
1140
  width: 1px;
1089
1141
  height: 1px;
@@ -1094,176 +1146,6 @@ body {
1094
1146
  clip: rect(0 0 0 0);
1095
1147
  overflow: hidden;
1096
1148
  }
1097
- .ilo--card--light {
1098
- background: rgb(255, 255, 255);
1099
- }
1100
- .ilo--card--dark:not(.ilo--card--detail):not(.ilo--card--data):not(.ilo--card--multilink):not(:hover):not(:focus):not(:focus-within) {
1101
- background: rgb(35, 0, 80);
1102
- outline: none;
1103
- transition: background 150ms ease-out;
1104
- }
1105
- .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 {
1106
- color: rgb(237, 240, 242);
1107
- transition: color 150ms ease-out;
1108
- }
1109
- .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 {
1110
- color: rgb(255, 255, 255);
1111
- transition: color 150ms ease-out;
1112
- }
1113
- .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 {
1114
- color: rgb(237, 240, 242);
1115
- transition: color 150ms ease-out;
1116
- }
1117
- .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 {
1118
- color: rgb(237, 240, 242);
1119
- transition: color 150ms ease-out;
1120
- }
1121
- .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 {
1122
- color: rgb(237, 240, 242);
1123
- transition: color 150ms ease-out;
1124
- }
1125
- .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 {
1126
- background: rgb(35, 0, 80);
1127
- outline: none;
1128
- transition: background 150ms ease-out;
1129
- }
1130
- .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 {
1131
- color: rgb(237, 240, 242);
1132
- transition: color 150ms ease-out;
1133
- }
1134
- .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 {
1135
- color: rgb(255, 255, 255);
1136
- transition: color 150ms ease-out;
1137
- }
1138
- .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 {
1139
- color: rgb(237, 240, 242);
1140
- transition: color 150ms ease-out;
1141
- }
1142
- .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 {
1143
- color: rgb(237, 240, 242);
1144
- transition: color 150ms ease-out;
1145
- }
1146
- .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 {
1147
- color: rgb(237, 240, 242);
1148
- transition: color 150ms ease-out;
1149
- }
1150
- .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) {
1151
- margin-top: 2.1436227224rem;
1152
- padding-top: 0;
1153
- position: relative;
1154
- }
1155
- .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 {
1156
- background: inherit;
1157
- content: "";
1158
- display: block;
1159
- height: 40px;
1160
- position: absolute;
1161
- width: calc(100% - 73px);
1162
- }
1163
- .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 {
1164
- 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");
1165
- background-position: bottom right;
1166
- background-size: cover;
1167
- content: "";
1168
- height: 40px;
1169
- display: block;
1170
- position: absolute;
1171
- width: 73.4px;
1172
- }
1173
- .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 {
1174
- 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");
1175
- }
1176
- @media screen and (min-width: 610px) {
1177
- .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) {
1178
- margin-top: 2.5723472669rem;
1179
- }
1180
- .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 {
1181
- background: inherit;
1182
- content: "";
1183
- display: block;
1184
- height: 48px;
1185
- position: absolute;
1186
- width: calc(100% - 87px);
1187
- }
1188
- .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 {
1189
- 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");
1190
- background-position: bottom right;
1191
- background-size: cover;
1192
- content: "";
1193
- height: 48px;
1194
- display: block;
1195
- position: absolute;
1196
- width: 87.4px;
1197
- }
1198
- .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 {
1199
- 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");
1200
- }
1201
- }
1202
- @media screen and (min-width: 1024px) {
1203
- .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) {
1204
- margin-top: 3.4297963558rem;
1205
- }
1206
- .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 {
1207
- background: inherit;
1208
- content: "";
1209
- display: block;
1210
- height: 64px;
1211
- position: absolute;
1212
- width: calc(100% - 116px);
1213
- }
1214
- .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 {
1215
- 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");
1216
- background-position: bottom right;
1217
- background-size: cover;
1218
- content: "";
1219
- height: 64px;
1220
- display: block;
1221
- position: absolute;
1222
- width: 116.4px;
1223
- }
1224
- .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 {
1225
- 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");
1226
- }
1227
- }
1228
- .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 {
1229
- left: 0;
1230
- top: -2.1436227224rem;
1231
- transition: background-image 150ms ease-out;
1232
- }
1233
- .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 {
1234
- left: auto;
1235
- right: 0;
1236
- }
1237
- @media screen and (min-width: 610px) {
1238
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::before {
1239
- top: -2.5562700965rem;
1240
- }
1241
- }
1242
- @media screen and (min-width: 1024px) {
1243
- .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 {
1244
- top: -3.4137191854rem;
1245
- }
1246
- }
1247
- .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 {
1248
- right: 0;
1249
- top: -2.1436227224rem;
1250
- transition: background-image 150ms ease-out;
1251
- }
1252
- .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 {
1253
- left: 0;
1254
- right: auto;
1255
- transform: rotateY(180deg);
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)::after {
1259
- top: -2.5562700965rem;
1260
- }
1261
- }
1262
- @media screen and (min-width: 1024px) {
1263
- .ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature):not(.ilo--card--graphic):not(.ilo--card--stat):not(.ilo--card--data)::after {
1264
- top: -3.4137191854rem;
1265
- }
1266
- }
1267
1149
  .ilo--card--eyebrow {
1268
1150
  color: rgb(150, 10, 85);
1269
1151
  font-size: 16px;
@@ -1336,7 +1218,7 @@ body {
1336
1218
  line-height: 23.36px;
1337
1219
  margin-bottom: 1.3742266073rem;
1338
1220
  }
1339
- .ilo--card--image {
1221
+ .ilo--card--picture {
1340
1222
  max-width: 100%;
1341
1223
  width: 100%;
1342
1224
  }
@@ -1344,190 +1226,131 @@ body {
1344
1226
  position: relative;
1345
1227
  z-index: 2;
1346
1228
  }
1347
- .ilo--card--isvideo .ilo--card--image--wrapper {
1229
+
1230
+ /**
1231
+ * Do not edit directly
1232
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1233
+ */
1234
+ /**
1235
+ * TOKENS:
1236
+ */
1237
+ /**
1238
+ * MAPS:
1239
+ */
1240
+ .ilo--card__type__feature {
1241
+ --max-width: 22.0793140407rem;
1242
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1243
+ display: flex;
1244
+ margin-top: 0;
1348
1245
  position: relative;
1349
1246
  }
1350
- .ilo--card--isvideo .ilo--card--image--wrapper::before {
1351
- 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");
1352
- background-color: rgb(45, 45, 45);
1353
- background-position: center;
1354
- background-size: 18px 20px;
1355
- background-repeat: no-repeat;
1356
- content: "";
1357
- display: block;
1358
- height: 40px;
1359
- left: 0;
1360
- position: absolute;
1361
- top: 0;
1362
- width: 40px;
1363
- z-index: 1;
1247
+ .ilo--card__type__feature.ilo--card__theme__dark {
1248
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1364
1249
  }
1365
- .ilo--card--multilink {
1366
- padding: 1.2861736334rem;
1250
+ .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list {
1251
+ border-top: 2px solid rgba(237, 240, 242, 0.25);
1367
1252
  }
1368
- .ilo--card--multilink .ilo--card--image--wrapper {
1369
- display: none;
1253
+ .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list--link {
1254
+ color: rgb(255, 255, 255);
1255
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1370
1256
  }
1371
- .ilo--card--multilink .ilo--card--content .ilo--card--image--wrapper {
1372
- display: block;
1257
+ .ilo--card__type__feature.ilo--card__theme__dark:hover .ilo--link-list--link, .ilo--card__type__feature.ilo--card__theme__dark:focus .ilo--link-list--link, .ilo--card__type__feature.ilo--card__theme__dark:focus-within .ilo--link-list--link {
1258
+ color: rgb(30, 45, 190);
1259
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1373
1260
  }
1374
- @media screen and (min-width: 610px) {
1375
- .ilo--card--multilink {
1376
- padding: 2.1436227224rem;
1377
- }
1261
+ .ilo--card__type__feature picture::before {
1262
+ transition-property: opacity;
1263
+ transition-duration: 150ms;
1264
+ transition-timing-function: ease-out;
1378
1265
  }
1379
- @media screen and (min-width: 1024px) {
1380
- .ilo--card--multilink {
1381
- padding: 3.0010718114rem 2.5723472669rem;
1382
- }
1266
+ .ilo--card__type__feature:hover, .ilo--card__type__feature:focus, .ilo--card__type__feature:focus-within {
1267
+ background-color: rgb(255, 255, 255);
1268
+ border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
1269
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1383
1270
  }
1384
- .ilo--card--multilink .ilo--card--title {
1385
- font-size: 23.32px;
1386
- letter-spacing: -0.035em;
1387
- line-height: 29.15px;
1388
- margin-bottom: 0.7188906752rem;
1389
- color: rgb(45, 45, 45);
1271
+ .ilo--card__type__feature:hover picture::before, .ilo--card__type__feature:focus picture::before, .ilo--card__type__feature:focus-within picture::before {
1272
+ opacity: 0.4;
1273
+ z-index: 1;
1274
+ transition-property: opacity;
1275
+ transition-duration: 150ms;
1276
+ transition-timing-function: ease-out;
1390
1277
  }
1391
- @media screen and (min-width: 610px) {
1392
- .ilo--card--multilink .ilo--card--title {
1393
- font-size: 29.16px;
1394
- letter-spacing: -0.035em;
1395
- line-height: 36.45px;
1396
- margin-bottom: 0.5741425509rem;
1397
- }
1278
+ .ilo--card__type__feature:hover .ilo--card--picture, .ilo--card__type__feature:focus .ilo--card--picture, .ilo--card__type__feature:focus-within .ilo--card--picture {
1279
+ filter: saturate(0);
1398
1280
  }
1399
- .ilo--card--multilink .ilo--card--intro {
1400
- font-size: 16px;
1401
- letter-spacing: normal;
1402
- line-height: 23.36px;
1403
- margin-bottom: 1.910132288rem;
1404
- color: rgb(45, 45, 45);
1281
+ .ilo--card__type__feature .ilo--link-list {
1282
+ border-top: 0.1071811361rem solid rgb(237, 240, 242);
1283
+ margin-left: -1.2861736334rem;
1284
+ margin-right: -1.2861736334rem;
1285
+ margin-top: 1.822079314rem;
1286
+ position: relative;
1287
+ z-index: 2;
1405
1288
  }
1406
- @media screen and (min-width: 610px) {
1407
- .ilo--card--multilink .ilo--card--intro {
1408
- font-size: 18.66px;
1409
- letter-spacing: normal;
1410
- line-height: 27.24px;
1411
- margin-bottom: 1.8685411561rem;
1412
- }
1289
+ .ilo--card__type__feature .ilo--link-list--link, .ilo--card__type__feature .ilo--link-list--link:hover {
1290
+ border-bottom: none;
1291
+ padding-left: 1.2861736334rem;
1292
+ padding-right: 1.2861736334rem;
1413
1293
  }
1414
- .ilo--card--multilink.ilo--card--dark {
1415
- background: rgb(255, 255, 255);
1294
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--wrap {
1295
+ display: flex;
1296
+ flex-wrap: wrap;
1297
+ width: 100%;
1416
1298
  }
1417
- .ilo--card--multilink.ilo--card--dark .ilo--card--title {
1418
- color: rgb(45, 45, 45);
1299
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--content {
1300
+ width: 100%;
1419
1301
  }
1420
- .ilo--card--multilink.ilo--card--dark .ilo--card--intro {
1421
- color: rgb(45, 45, 45);
1302
+ .ilo--card__type__feature.ilo--card__size__narrow .ilo--card--image--wrapper {
1303
+ width: 100%;
1422
1304
  }
1423
- .ilo--card--multilink.ilo--card--wide {
1424
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1305
+ .ilo--card__type__feature.ilo--card__size__wide, .ilo--card__type__feature.ilo--card__size__fluid {
1306
+ --max-width: 40.4072883173rem;
1425
1307
  }
1426
1308
  @media screen and (min-width: 610px) {
1427
- .ilo--card--multilink.ilo--card--wide {
1428
- padding: 3.0010718114rem 2.5723472669rem;
1429
- }
1430
- .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1431
- flex-direction: row-reverse;
1432
- }
1433
- .right-to-left .ilo--card--multilink.ilo--card--wide.ilo--card--right .ilo--card--wrap {
1309
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--wrap, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--wrap {
1434
1310
  flex-direction: row;
1435
1311
  }
1436
- .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1437
- display: flex;
1438
- column-gap: 1.7148981779rem;
1439
- }
1440
- .right-to-left .ilo--card--multilink.ilo--card--wide .ilo--card--wrap {
1312
+ .right-to-left .ilo--card__type__feature.ilo--card__size__wide .ilo--card--wrap, .right-to-left .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--wrap {
1441
1313
  flex-direction: row-reverse;
1442
1314
  }
1443
- .ilo--card--multilink.ilo--card--wide .ilo--card--image--wrapper {
1444
- display: block;
1315
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--content, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--content {
1316
+ display: flex;
1317
+ flex-direction: row;
1318
+ flex-wrap: wrap;
1319
+ position: relative;
1445
1320
  width: 50%;
1446
1321
  }
1447
- .ilo--card--multilink.ilo--card--wide .ilo--card--content {
1322
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image--wrapper {
1448
1323
  width: 50%;
1449
1324
  }
1450
- .ilo--card--multilink.ilo--card--wide .ilo--card--content .ilo--card--image--wrapper {
1451
- display: none;
1325
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--image, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image {
1326
+ object-fit: cover;
1452
1327
  }
1453
- }
1454
- .ilo--card--multilink.ilo--card--standard {
1455
- padding: 2.5723472669rem 2.1436227224rem;
1456
- }
1457
- @media screen and (min-width: 610px) {
1458
- .ilo--card--multilink.ilo--card--standard {
1459
- padding: 2.5723472669rem 2.1436227224rem;
1460
- }
1461
- }
1462
- @media screen and (min-width: 1024px) {
1463
- .ilo--card--multilink.ilo--card--standard {
1464
- padding: 2.5723472669rem 2.1436227224rem;
1465
- }
1466
- }
1467
- .ilo--card--multilink.ilo--card--narrow {
1468
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1469
- }
1470
- @media screen and (min-width: 610px) {
1471
- .ilo--card--multilink.ilo--card--narrow {
1472
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1473
- }
1474
- }
1475
- @media screen and (min-width: 1024px) {
1476
- .ilo--card--multilink.ilo--card--narrow {
1477
- padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1328
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--date, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--date {
1329
+ align-self: flex-end;
1330
+ width: 100%;
1478
1331
  }
1479
- }
1480
- .ilo--card--multilink.ilo--card--narrow .ilo--card--image--wrapper {
1481
- display: none;
1482
- }
1483
- .ilo--card--multilink.ilo--card--narrow .ilo--card--content .ilo--card--image--wrapper {
1484
- display: block;
1485
- margin-bottom: 1.2861736334rem;
1486
- }
1487
- @media screen and (min-width: 610px) {
1488
- .ilo--card--multilink.ilo--card--narrow .ilo--card--title {
1489
- font-size: 23.32px;
1490
- letter-spacing: -0.035em;
1491
- line-height: 29.15px;
1492
- margin-bottom: 0.7188906752rem;
1332
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--eyebrow, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--eyebrow {
1333
+ width: 100%;
1493
1334
  }
1494
- }
1495
- @media screen and (min-width: 610px) {
1496
- .ilo--card--multilink.ilo--card--narrow .ilo--card--intro {
1497
- font-size: 16px;
1498
- letter-spacing: normal;
1499
- line-height: 23.36px;
1500
- margin-bottom: 1.910132288rem;
1335
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--card--title, .ilo--card__type__feature.ilo--card__size__fluid .ilo--card--title {
1336
+ width: 100%;
1501
1337
  }
1502
- }
1503
- .ilo--card--multilink .ilo--link-list {
1504
- margin-top: 1.8756698821rem;
1505
- }
1506
- .ilo--card--detail {
1507
- border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1508
- padding: 1.2861736334rem 0;
1509
- position: relative;
1510
- }
1511
- @media screen and (min-width: 1024px) {
1512
- .ilo--card--detail {
1513
- padding: 1.7148981779rem 0;
1338
+ .ilo--card__type__feature.ilo--card__size__wide .ilo--link-list, .ilo--card__type__feature.ilo--card__size__fluid .ilo--link-list {
1339
+ width: calc(100% + 48px);
1340
+ align-self: flex-end;
1514
1341
  }
1515
1342
  }
1516
- .ilo--card--detail:hover, .ilo--card--detail:focus, .ilo--card--detail:focus-within {
1517
- 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));
1518
- }
1519
- .ilo--card--detail:hover picture::before, .ilo--card--detail:focus picture::before, .ilo--card--detail:focus-within picture::before {
1520
- opacity: 0.4;
1521
- z-index: 2;
1522
- }
1523
- .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 {
1524
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(30, 45, 190)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1343
+ .ilo--card__type__feature .ilo--card--wrap {
1344
+ display: flex;
1345
+ flex-direction: column;
1346
+ width: 100%;
1525
1347
  }
1526
- .ilo--card--detail picture {
1348
+ .ilo--card__type__feature picture {
1527
1349
  display: flex;
1350
+ height: 100%;
1528
1351
  position: relative;
1529
1352
  }
1530
- .ilo--card--detail picture::before {
1353
+ .ilo--card__type__feature picture::before {
1531
1354
  background-color: rgb(30, 45, 190);
1532
1355
  content: "";
1533
1356
  display: block;
@@ -1536,725 +1359,590 @@ body {
1536
1359
  opacity: 0;
1537
1360
  position: absolute;
1538
1361
  top: 0;
1362
+ transition: opacity 150ms ease-in-out;
1539
1363
  width: 100%;
1540
1364
  z-index: -1;
1541
- transition-property: opacity;
1542
- transition-duration: 150ms;
1543
- transition-timing-function: ease-out;
1544
1365
  }
1545
- .ilo--card--detail .ilo--card--wrap {
1366
+ .ilo--card__type__feature .ilo--card--content {
1546
1367
  display: flex;
1368
+ flex: 1 1 auto;
1369
+ flex-direction: column;
1370
+ padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
1547
1371
  }
1548
- .right-to-left .ilo--card--detail .ilo--card--wrap {
1549
- flex-direction: row-reverse;
1372
+ .ilo--card__type__feature.ilo--card__linklist .ilo--card--content {
1373
+ padding-bottom: 0;
1550
1374
  }
1551
- .ilo--card--detail .ilo--card--image {
1552
- object-fit: contain;
1553
- width: 4.1264737406rem;
1375
+ .ilo--card__type__feature .ilo--card--title {
1376
+ font-size: 23.32px;
1377
+ letter-spacing: -0.035em;
1378
+ line-height: 29.15px;
1379
+ margin-bottom: 1.5763397642rem;
1380
+ font-family: Overpass;
1381
+ font-weight: 700;
1554
1382
  }
1555
- @media screen and (min-width: 1024px) {
1556
- .ilo--card--detail .ilo--card--image {
1557
- width: 10.718113612rem;
1383
+ .ilo--card__type__feature .ilo--card--eyebrow {
1384
+ font-size: 14.93px;
1385
+ letter-spacing: normal;
1386
+ line-height: 19.71px;
1387
+ margin-bottom: 0.3376482577rem;
1388
+ }
1389
+ .ilo--card__type__feature .ilo--card--date {
1390
+ margin-bottom: 0;
1391
+ margin-top: auto;
1392
+ }
1393
+
1394
+ /**
1395
+ * Do not edit directly
1396
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1397
+ */
1398
+ /**
1399
+ * TOKENS:
1400
+ */
1401
+ /**
1402
+ * MAPS:
1403
+ */
1404
+ .ilo--card__type__text {
1405
+ --max-width: 16.1307609861rem;
1406
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1407
+ padding: 1.2861736334rem 2.1436227224rem;
1408
+ clip-path: polygon(0 0, calc(100% - 73px) 0, 100% 40px, 100% 100%, 0 100%);
1409
+ }
1410
+ .ilo--card__type__text [class$=profile--contents--light] * {
1411
+ color: rgb(45, 45, 45);
1412
+ }
1413
+ .ilo--card__type__text [class$=profile--contents--dark] * {
1414
+ color: rgb(255, 255, 255);
1415
+ }
1416
+ .ilo--card__type__text:hover, .ilo--card__type__text:focus, .ilo--card__type__text:focus-within {
1417
+ filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1418
+ }
1419
+ .ilo--card__type__text:hover [class*=profile--contents] *, .ilo--card__type__text:focus [class*=profile--contents] *, .ilo--card__type__text:focus-within [class*=profile--contents] * {
1420
+ color: rgb(30, 45, 190);
1421
+ }
1422
+ @media screen and (min-width: 610px) {
1423
+ .ilo--card__type__text {
1424
+ padding: 1.7148981779rem 2.1436227224rem;
1558
1425
  }
1559
1426
  }
1560
- .ilo--card--detail .ilo--card--image--wrapper {
1561
- max-width: 4.1264737406rem;
1562
- width: 100%;
1427
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1428
+ --max-width: 28.0278670954rem;
1429
+ padding: 1.7148981779rem 2.1436227224rem;
1563
1430
  }
1564
- @media screen and (min-width: 1024px) {
1565
- .ilo--card--detail .ilo--card--image--wrapper {
1566
- max-width: 10.718113612rem;
1431
+ @media screen and (min-width: 610px) {
1432
+ .ilo--card__type__text.ilo--card__size__wide, .ilo--card__type__text.ilo--card__size__fluid {
1433
+ padding: 1.7148981779rem 2.1436227224rem;
1567
1434
  }
1568
1435
  }
1569
- .ilo--card--detail .ilo--card--content {
1570
- padding: 0 1.2861736334rem;
1436
+ .ilo--card__type__text.ilo--card__size__narrow {
1437
+ --max-width: 16.1307609861rem;
1438
+ padding: 1.2861736334rem 2.1436227224rem;
1439
+ }
1440
+ @media screen and (min-width: 610px) {
1441
+ .ilo--card__type__text.ilo--card__size__narrow {
1442
+ padding: 1.2861736334rem 2.1436227224rem;
1443
+ }
1571
1444
  }
1572
- .ilo--card--detail .ilo--card--title {
1445
+ .ilo--card__type__text.ilo--card__size__narrow .ilo--card--title {
1573
1446
  font-size: 18.66px;
1574
1447
  letter-spacing: -0.035em;
1575
1448
  line-height: 24.26px;
1449
+ margin-bottom: 1.674953518rem;
1576
1450
  }
1577
- @media screen and (min-width: 1024px) {
1578
- .ilo--card--detail .ilo--card--title {
1451
+ .ilo--card__type__text.ilo--card__dark {
1452
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1453
+ }
1454
+ .ilo--card__type__text .ilo--card--eyebrow {
1455
+ margin-bottom: 1.0110920672rem;
1456
+ }
1457
+ .ilo--card__type__text .ilo--card--title {
1458
+ font-size: 18.66px;
1459
+ letter-spacing: -0.035em;
1460
+ line-height: 24.26px;
1461
+ margin-bottom: 1.674953518rem;
1462
+ }
1463
+ @media screen and (min-width: 610px) {
1464
+ .ilo--card__type__text .ilo--card--title {
1579
1465
  font-size: 23.32px;
1580
1466
  letter-spacing: -0.035em;
1581
1467
  line-height: 29.15px;
1468
+ margin-bottom: 1.5763397642rem;
1582
1469
  }
1583
1470
  }
1584
- .ilo--card--detail .ilo--card--event-date {
1585
- font-size: 16px;
1586
- letter-spacing: normal;
1587
- line-height: 23.36px;
1588
- margin-bottom: 0;
1589
- padding-left: 1.2861736334rem;
1590
- position: relative;
1591
- }
1592
- .ilo--card--detail .ilo--card--event-date::before {
1593
- background-repeat: no-repeat;
1594
- content: "";
1595
- display: inline-block;
1596
- height: 0.7502679528rem;
1597
- left: 0;
1598
- position: absolute;
1599
- top: 50%;
1600
- transform: rotate(-90deg) translateX(50%);
1601
- width: 0.6430868167rem;
1602
- 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");
1603
- }
1604
- .ilo--card--detail .ilo--card--date {
1605
- font-size: 16px;
1606
- letter-spacing: normal;
1607
- line-height: 23.36px;
1608
- }
1609
- .ilo--card--graphic {
1610
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1611
- margin-top: 2.1436227224rem;
1612
- padding: 0 1.2861736334rem 2.1436227224rem;
1613
- position: relative;
1614
- }
1615
- .ilo--card--graphic::before {
1616
- background: inherit;
1617
- content: "";
1618
- display: block;
1619
- height: 40px;
1620
- position: absolute;
1621
- width: calc(100% - 73px);
1622
- }
1623
- .ilo--card--graphic::after {
1624
- 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");
1625
- background-position: bottom right;
1626
- background-size: cover;
1627
- content: "";
1628
- height: 40px;
1471
+ .ilo--card__type__text .ilo--card--date {
1629
1472
  display: block;
1630
- position: absolute;
1631
- width: 73.4px;
1632
- }
1633
- .ilo--card--graphic.ilo--card--dark::after {
1634
- 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");
1635
- }
1636
- .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 {
1637
- 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");
1638
- }
1639
- .ilo--card--graphic::before {
1640
- left: 0;
1641
- top: -39.7px;
1473
+ margin-bottom: 1.4398166117rem;
1642
1474
  }
1643
- .right-to-left .ilo--card--graphic::before {
1644
- left: auto;
1645
- right: 0;
1475
+ .ilo--card__type__text .ilo--card--content {
1476
+ display: flex;
1477
+ flex-direction: column;
1478
+ position: relative;
1646
1479
  }
1647
- .ilo--card--graphic::after {
1648
- right: 0;
1649
- top: -39.7px;
1650
- transition: background-image 150ms ease-out;
1480
+ .ilo--card__type__text .ilo--card--content > * {
1481
+ justify-self: flex-start;
1651
1482
  }
1652
- .right-to-left .ilo--card--graphic::after {
1653
- left: 0;
1654
- right: auto;
1655
- transform: rotateY(180deg);
1483
+ .ilo--card__type__text .ilo--card--content > *:last-child {
1484
+ justify-self: flex-end;
1485
+ margin-bottom: 0;
1656
1486
  }
1657
- .ilo--card--graphic .ilo--profile--contents--light * {
1658
- color: rgb(45, 45, 45);
1487
+
1488
+ /**
1489
+ * Do not edit directly
1490
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1491
+ */
1492
+ /**
1493
+ * TOKENS:
1494
+ */
1495
+ /**
1496
+ * MAPS:
1497
+ */
1498
+ .ilo--card__type__detail {
1499
+ --max-width: 18.3815648446rem;
1500
+ border-bottom: 0.1607717042rem solid rgb(237, 240, 242);
1501
+ padding: 1.2861736334rem 0;
1502
+ position: relative;
1659
1503
  }
1660
- .ilo--card--graphic .ilo--profile--contents--dark * {
1661
- color: rgb(255, 255, 255);
1504
+ @media screen and (min-width: 1024px) {
1505
+ .ilo--card__type__detail {
1506
+ padding: 1.7148981779rem 0;
1507
+ }
1662
1508
  }
1663
- .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
1509
+ .ilo--card__type__detail:hover, .ilo--card__type__detail:focus, .ilo--card__type__detail:focus-within {
1664
1510
  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038)) drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054)) drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08)) drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
1665
1511
  }
1666
- .ilo--card--graphic:hover .ilo--profile--contents *, .ilo--card--graphic:focus .ilo--profile--contents *, .ilo--card--graphic:focus-within .ilo--profile--contents * {
1667
- color: rgb(30, 45, 190);
1512
+ .ilo--card__type__detail:hover picture::before, .ilo--card__type__detail:focus picture::before, .ilo--card__type__detail:focus-within picture::before {
1513
+ opacity: 0.4;
1514
+ z-index: 2;
1668
1515
  }
1669
- @media screen and (min-width: 610px) {
1670
- .ilo--card--graphic {
1671
- padding: 0 1.7148981779rem 2.1436227224rem;
1672
- }
1673
- .ilo--card--graphic::before {
1674
- background: inherit;
1675
- content: "";
1676
- display: block;
1677
- height: 40px;
1678
- position: absolute;
1679
- width: calc(100% - 73px);
1680
- }
1681
- .ilo--card--graphic::after {
1682
- 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");
1683
- background-position: bottom right;
1684
- background-size: cover;
1685
- content: "";
1686
- height: 40px;
1687
- display: block;
1688
- position: absolute;
1689
- width: 73.4px;
1690
- }
1691
- .ilo--card--graphic.ilo--card--dark::after {
1692
- 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");
1693
- }
1694
- .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 {
1695
- 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");
1696
- }
1697
- .ilo--card--graphic::before {
1698
- left: 0;
1699
- top: -39.7px;
1700
- }
1701
- .right-to-left .ilo--card--graphic::before {
1702
- left: auto;
1703
- right: 0;
1704
- }
1705
- .ilo--card--graphic::after {
1706
- right: 0;
1707
- top: -39.7px;
1708
- }
1709
- .right-to-left .ilo--card--graphic::after {
1710
- left: 0;
1711
- right: auto;
1712
- transform: rotateY(180deg);
1713
- }
1516
+ .ilo--card__type__detail:hover .ilo--card--date-extra::before, .ilo--card__type__detail:focus .ilo--card--date-extra::before, .ilo--card__type__detail:focus-within .ilo--card--date-extra::before {
1517
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(30, 45, 190)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1518
+ }
1519
+ .ilo--card__type__detail .ilo--card--title {
1520
+ font-size: 18.66px;
1521
+ letter-spacing: -0.035em;
1522
+ line-height: 24.26px;
1714
1523
  }
1715
1524
  @media screen and (min-width: 1024px) {
1716
- .ilo--card--graphic::before {
1717
- background: inherit;
1718
- content: "";
1719
- display: block;
1720
- height: 40px;
1721
- position: absolute;
1722
- width: calc(100% - 73px);
1723
- }
1724
- .ilo--card--graphic::after {
1725
- 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");
1726
- background-position: bottom right;
1727
- background-size: cover;
1728
- content: "";
1729
- height: 40px;
1730
- display: block;
1731
- position: absolute;
1732
- width: 73.4px;
1733
- }
1734
- .ilo--card--graphic.ilo--card--dark::after {
1735
- 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");
1736
- }
1737
- .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 {
1738
- 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");
1739
- }
1740
- .ilo--card--graphic::before {
1741
- left: 0;
1742
- top: -39.7px;
1743
- }
1744
- .right-to-left .ilo--card--graphic::before {
1745
- left: auto;
1746
- right: 0;
1747
- }
1748
- .ilo--card--graphic::after {
1749
- right: 0;
1750
- top: -39.7px;
1525
+ .ilo--card__size__wide .ilo--card__type__detail .ilo--card--title {
1526
+ font-size: 23.32px;
1527
+ letter-spacing: -0.035em;
1528
+ line-height: 29.15px;
1751
1529
  }
1752
- .right-to-left .ilo--card--graphic::after {
1753
- left: 0;
1754
- right: auto;
1755
- transform: rotateY(180deg);
1530
+ .ilo--card__size__wide .ilo--card__type__detail .ilo--card--title {
1531
+ font-size: 18.66px;
1532
+ letter-spacing: -0.035em;
1533
+ line-height: 24.26px;
1756
1534
  }
1757
1535
  }
1758
- .ilo--card--graphic.ilo--card--wide {
1759
- padding: 0 1.7148981779rem 2.1436227224rem;
1536
+ .ilo--card__type__detail.ilo--card__size__wide, .ilo--card__type__detail.ilo--card__size__fluid {
1537
+ --max-width: 39.9249732047rem;
1760
1538
  }
1761
- @media screen and (min-width: 610px) {
1762
- .ilo--card--graphic.ilo--card--wide {
1763
- padding: 0 1.7148981779rem 2.1436227224rem;
1539
+ @media screen and (min-width: 1024px) {
1540
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--title, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--title {
1541
+ font-size: 23.32px;
1542
+ letter-spacing: -0.035em;
1543
+ line-height: 29.15px;
1764
1544
  }
1765
1545
  }
1766
- .ilo--card--graphic.ilo--card--standard {
1767
- padding: 0 1.7148981779rem 2.1436227224rem;
1546
+ @media screen and (min-width: 1024px) {
1547
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--image--wrapper {
1548
+ flex: 0 0 10.5037513398rem;
1549
+ }
1768
1550
  }
1769
- @media screen and (min-width: 610px) {
1770
- .ilo--card--graphic.ilo--card--standard {
1771
- padding: 0 1.7148981779rem 2.1436227224rem;
1551
+ @media screen and (min-width: 1024px) {
1552
+ .ilo--card__type__detail.ilo--card__size__wide .ilo--card--picture, .ilo--card__type__detail.ilo--card__size__fluid .ilo--card--picture {
1553
+ width: 10.5037513398rem;
1772
1554
  }
1773
1555
  }
1774
- .ilo--card--graphic.ilo--card--narrow {
1775
- padding: 0 1.2861736334rem 2.1436227224rem;
1556
+ .ilo--card__type__detail.ilo--card__size__narrow {
1557
+ --max-width: 18.3815648446rem;
1776
1558
  }
1777
- @media screen and (min-width: 610px) {
1778
- .ilo--card--graphic.ilo--card--narrow {
1779
- padding: 0 1.2861736334rem 2.1436227224rem;
1780
- }
1559
+ .ilo--card__type__detail picture {
1560
+ display: flex;
1561
+ position: relative;
1781
1562
  }
1782
- .ilo--card--graphic.ilo--card--narrow .ilo--card--title {
1783
- font-size: 18.66px;
1784
- letter-spacing: -0.035em;
1785
- line-height: 24.26px;
1786
- margin-bottom: 1.674953518rem;
1563
+ .ilo--card__type__detail picture::before {
1564
+ background-color: rgb(30, 45, 190);
1565
+ content: "";
1566
+ display: block;
1567
+ height: 100%;
1568
+ left: 0;
1569
+ opacity: 0;
1570
+ position: absolute;
1571
+ top: 0;
1572
+ width: 100%;
1573
+ z-index: -1;
1574
+ transition-property: opacity;
1575
+ transition-duration: 150ms;
1576
+ transition-timing-function: ease-out;
1787
1577
  }
1788
- .ilo--card--graphic.ilo--card--dark {
1789
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1578
+ .ilo--card__type__detail .ilo--card--wrap {
1579
+ display: flex;
1790
1580
  }
1791
- .ilo--card--graphic .ilo--card--eyebrow {
1792
- margin-bottom: 1.0110920672rem;
1581
+ .right-to-left .ilo--card__type__detail .ilo--card--wrap {
1582
+ flex-direction: row-reverse;
1793
1583
  }
1794
- .ilo--card--graphic .ilo--card--title {
1584
+ .ilo--card__type__detail .ilo--card--title {
1795
1585
  font-size: 18.66px;
1796
1586
  letter-spacing: -0.035em;
1797
1587
  line-height: 24.26px;
1798
- margin-bottom: 1.674953518rem;
1799
1588
  }
1800
- @media screen and (min-width: 610px) {
1801
- .ilo--card--graphic .ilo--card--title {
1802
- font-size: 23.32px;
1803
- letter-spacing: -0.035em;
1804
- line-height: 29.15px;
1805
- margin-bottom: 1.5763397642rem;
1806
- }
1589
+ .ilo--card__type__detail .ilo--card--image--wrapper {
1590
+ flex: 0 0 4.1264737406rem;
1807
1591
  }
1808
- .ilo--card--graphic .ilo--card--date {
1809
- display: block;
1810
- margin-bottom: 1.4398166117rem;
1592
+ .ilo--card__type__detail .ilo--card--picture {
1593
+ object-fit: contain;
1594
+ width: 4.1264737406rem;
1811
1595
  }
1812
- .ilo--card--graphic .ilo--card--content {
1813
- display: flex;
1814
- flex-direction: column;
1596
+ .ilo--card__type__detail .ilo--card--content {
1597
+ padding: 0 1.2861736334rem;
1598
+ }
1599
+ .ilo--card__type__detail .ilo--card--date-extra {
1600
+ font-size: 16px;
1601
+ letter-spacing: normal;
1602
+ line-height: 23.36px;
1603
+ margin-bottom: 0;
1604
+ padding-left: 1.2861736334rem;
1815
1605
  position: relative;
1816
1606
  }
1817
- .ilo--card--graphic .ilo--card--content > * {
1818
- justify-self: flex-start;
1607
+ .ilo--card__type__detail .ilo--card--date-extra::before {
1608
+ background-repeat: no-repeat;
1609
+ content: "";
1610
+ display: inline-block;
1611
+ height: 0.7502679528rem;
1612
+ left: 0;
1613
+ position: absolute;
1614
+ top: 50%;
1615
+ transform: rotate(-90deg) translateX(50%);
1616
+ width: 0.6430868167rem;
1617
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3e%3cpath fill='rgb(45, 45, 45)' d='M6.00007 10.8462L12 0L0 0L6.00007 10.8462Z'/%3e%3c/svg%3e");
1819
1618
  }
1820
- .ilo--card--graphic .ilo--card--content > *:last-child {
1821
- justify-self: flex-end;
1822
- margin-bottom: 0;
1619
+ .ilo--card__type__detail .ilo--card--date {
1620
+ font-size: 16px;
1621
+ letter-spacing: normal;
1622
+ line-height: 23.36px;
1823
1623
  }
1824
- .ilo--card--graphicpromo {
1825
- max-width: 49.3033226152rem;
1624
+
1625
+ /**
1626
+ * Do not edit directly
1627
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1628
+ */
1629
+ /**
1630
+ * TOKENS:
1631
+ */
1632
+ /**
1633
+ * MAPS:
1634
+ */
1635
+ .ilo--card__type__promo {
1636
+ --max-width: 18.3815648446rem;
1826
1637
  padding: 2.1436227224rem 1.2861736334rem;
1827
1638
  width: 100%;
1828
1639
  }
1829
- .ilo--card--graphicpromo:hover, .ilo--card--graphicpromo:focus, .ilo--card--graphicpromo:focus-within {
1830
- 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));
1831
- }
1832
1640
  @media screen and (min-width: 610px) {
1833
- .ilo--card--graphicpromo {
1641
+ .ilo--card__type__promo {
1834
1642
  padding: 2.5723472669rem;
1835
1643
  }
1836
1644
  }
1837
1645
  @media screen and (min-width: 1024px) {
1838
- .ilo--card--graphicpromo {
1646
+ .ilo--card__type__promo {
1839
1647
  padding: 3.4297963558rem 3.8585209003rem;
1840
1648
  }
1841
1649
  }
1842
- .ilo--card--graphicpromo.ilo--card--wide {
1843
- padding: 3.4297963558rem 3.8585209003rem;
1650
+ .ilo--card__type__promo.ilo--card__size__standard {
1651
+ --max-width: 33.9764201501rem;
1652
+ padding: 2.5723472669rem;
1844
1653
  }
1845
1654
  @media screen and (min-width: 610px) {
1846
- .ilo--card--graphicpromo.ilo--card--wide {
1847
- padding: 3.4297963558rem 3.8585209003rem;
1655
+ .ilo--card__type__promo.ilo--card__size__standard {
1656
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1848
1657
  }
1849
1658
  }
1850
1659
  @media screen and (min-width: 1024px) {
1851
- .ilo--card--graphicpromo.ilo--card--wide {
1852
- padding: 3.4297963558rem 3.8585209003rem;
1660
+ .ilo--card__type__promo.ilo--card__size__standard {
1661
+ padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem;
1853
1662
  }
1854
1663
  }
1855
- .ilo--card--graphicpromo.ilo--card--standard {
1856
- padding: 2.5723472669rem;
1664
+ .ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut {
1665
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
1666
+ }
1667
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1668
+ --max-width: 49.3033226152rem;
1669
+ padding: 3.4297963558rem 3.8585209003rem;
1857
1670
  }
1858
1671
  @media screen and (min-width: 610px) {
1859
- .ilo--card--graphicpromo.ilo--card--standard {
1860
- padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem 2.5723472669rem;
1672
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1673
+ padding: 3.4297963558rem 3.8585209003rem;
1861
1674
  }
1862
1675
  }
1863
1676
  @media screen and (min-width: 1024px) {
1864
- .ilo--card--graphicpromo.ilo--card--standard {
1865
- padding: 2.5723472669rem 2.5723472669rem 3.4297963558rem 2.5723472669rem;
1677
+ .ilo--card__type__promo.ilo--card__size__wide, .ilo--card__type__promo.ilo--card__size__fluid {
1678
+ padding: 3.4297963558rem 3.8585209003rem;
1866
1679
  }
1867
1680
  }
1868
- .ilo--card--graphicpromo.ilo--card--narrow {
1681
+ .ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut, .ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut {
1682
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
1683
+ }
1684
+ .ilo--card__type__promo.ilo--card__size__narrow {
1685
+ --max-width: 18.3815648446rem;
1869
1686
  padding: 2.1436227224rem 1.2861736334rem;
1870
1687
  }
1871
1688
  @media screen and (min-width: 610px) {
1872
- .ilo--card--graphicpromo.ilo--card--narrow {
1689
+ .ilo--card__type__promo.ilo--card__size__narrow {
1873
1690
  padding: 2.1436227224rem 1.2861736334rem;
1874
1691
  }
1875
1692
  }
1876
1693
  @media screen and (min-width: 1024px) {
1877
- .ilo--card--graphicpromo.ilo--card--narrow {
1694
+ .ilo--card__type__promo.ilo--card__size__narrow {
1878
1695
  padding: 2.1436227224rem 1.2861736334rem;
1879
1696
  }
1880
1697
  }
1881
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1698
+ .ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut {
1699
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
1700
+ }
1701
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1882
1702
  font-size: 29.16px;
1883
1703
  letter-spacing: -0.035em;
1884
1704
  line-height: 36.45px;
1885
1705
  margin-bottom: 0.5741425509rem;
1886
1706
  }
1887
1707
  @media screen and (min-width: 610px) {
1888
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--title {
1708
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title {
1889
1709
  font-size: 36.45px;
1890
1710
  letter-spacing: -0.035em;
1891
1711
  line-height: 43.74px;
1892
1712
  margin-bottom: 0.4278063594rem;
1893
1713
  }
1894
1714
  }
1895
- .ilo--card--graphicpromo.ilo--card--narrow .ilo--card--intro {
1715
+ .ilo--card__type__promo.ilo--card__size__narrow .ilo--card--intro {
1896
1716
  font-size: 16px;
1897
1717
  letter-spacing: normal;
1898
1718
  line-height: 23.36px;
1899
1719
  margin-bottom: 1.910132288rem;
1900
1720
  }
1901
- .ilo--card--graphicpromo.ilo--card--light:not(:hover) .ilo--card--title {
1721
+ .ilo--card__type__promo.ilo--card__theme__light:not(:hover) .ilo--card--title {
1902
1722
  color: rgb(45, 45, 45);
1903
1723
  transition-property: color;
1904
1724
  transition-duration: 150ms;
1905
1725
  transition-timing-function: ease-out;
1906
1726
  }
1907
- .ilo--card--graphicpromo .ilo--card--title {
1727
+ .ilo--card__type__promo .ilo--card--title {
1908
1728
  font-size: 29.16px;
1909
1729
  letter-spacing: -0.035em;
1910
1730
  line-height: 36.45px;
1911
1731
  margin-bottom: 0.5741425509rem;
1912
1732
  }
1913
1733
  @media screen and (min-width: 610px) {
1914
- .ilo--card--graphicpromo .ilo--card--title {
1734
+ .ilo--card__type__promo .ilo--card--title {
1915
1735
  font-size: 36.45px;
1916
1736
  letter-spacing: -0.035em;
1917
1737
  line-height: 43.74px;
1918
1738
  margin-bottom: 0.8565309039rem;
1919
1739
  }
1920
1740
  }
1921
- .ilo--card--graphicpromo .ilo--card--intro {
1741
+ .ilo--card__type__promo .ilo--card--intro {
1922
1742
  font-size: 16px;
1923
1743
  letter-spacing: normal;
1924
1744
  line-height: 23.36px;
1925
1745
  margin-bottom: 1.910132288rem;
1926
1746
  }
1927
1747
  @media screen and (min-width: 610px) {
1928
- .ilo--card--graphicpromo .ilo--card--intro {
1748
+ .ilo--card__type__promo .ilo--card--intro {
1929
1749
  font-size: 18.66px;
1930
1750
  letter-spacing: normal;
1931
1751
  line-height: 27.24px;
1932
1752
  margin-bottom: 1.8685411561rem;
1933
1753
  }
1934
1754
  }
1935
- .ilo--card--factlist {
1936
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
1937
- max-width: 45.8735262594rem;
1938
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1939
- pointer-events: none;
1940
- }
1941
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1942
- height: 40px;
1943
- top: -2.127545552rem;
1944
- width: calc(100% - 73px);
1945
- }
1946
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1947
- height: 40px;
1948
- top: -2.127545552rem;
1949
- width: 73.3px;
1950
- }
1951
- .ilo--card--factlist.ilo--card--dark {
1952
- background: rgb(35, 0, 80);
1953
- }
1954
- @media screen and (min-width: 1024px) {
1955
- .ilo--card--factlist {
1956
- padding: 0 2.1436227224rem 3.0010718114rem 2.1436227224rem;
1957
- }
1958
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
1959
- height: 48px;
1960
- top: -2.5562700965rem;
1961
- width: calc(100% - 87px);
1962
- }
1963
- .ilo--card--factlist.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
1964
- height: 48px;
1965
- top: -2.5562700965rem;
1966
- width: 87.3px;
1967
- }
1968
- }
1969
- .ilo--card--factlist.ilo--card--wide {
1970
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1755
+
1756
+ /**
1757
+ * Do not edit directly
1758
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1759
+ */
1760
+ /**
1761
+ * TOKENS:
1762
+ */
1763
+ /**
1764
+ * MAPS:
1765
+ */
1766
+ .ilo--card__type__multilink {
1767
+ --max-width: 28.7245444802rem;
1768
+ padding: 1.2861736334rem;
1971
1769
  }
1972
- @media screen and (min-width: 610px) {
1973
- .ilo--card--factlist.ilo--card--wide {
1974
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
1975
- }
1770
+ .ilo--card__type__multilink .ilo--card--image--wrapper {
1771
+ display: none;
1976
1772
  }
1977
- .ilo--card--factlist.ilo--card--standard {
1978
- padding: 0 2.1436227224rem 2.7867095391rem 2.1436227224rem;
1773
+ .ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper {
1774
+ display: block;
1979
1775
  }
1980
1776
  @media screen and (min-width: 610px) {
1981
- .ilo--card--factlist.ilo--card--standard {
1982
- padding: 0 2.1436227224rem 3.2154340836rem 2.1436227224rem;
1777
+ .ilo--card__type__multilink {
1778
+ padding: 2.1436227224rem;
1983
1779
  }
1984
1780
  }
1985
- .ilo--card--factlist.ilo--card--narrow {
1986
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1987
- }
1988
- @media screen and (min-width: 610px) {
1989
- .ilo--card--factlist.ilo--card--narrow {
1990
- padding: 0 1.2861736334rem 2.5723472669rem 1.2861736334rem;
1781
+ @media screen and (min-width: 1024px) {
1782
+ .ilo--card__type__multilink {
1783
+ padding: 3.0010718114rem 2.5723472669rem;
1991
1784
  }
1992
1785
  }
1993
- .ilo--card--factlist.ilo--card--dark {
1994
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1995
- }
1996
- .ilo--card--factlist.ilo--card--dark .ilo--card--title {
1997
- color: rgb(255, 255, 255);
1998
- transition-property: color;
1999
- transition-duration: 150ms;
2000
- transition-timing-function: ease-out;
2001
- }
2002
- .ilo--card--factlist.ilo--card--dark .ilo--list__item {
2003
- color: rgb(255, 255, 255);
2004
- }
2005
- .ilo--card--factlist.ilo--card--dark .ilo--list__item:last-of-type {
2006
- margin-bottom: 0;
2007
- }
2008
- .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 {
2009
- color: rgb(255, 255, 255);
2010
- transition-property: color;
2011
- transition-duration: 150ms;
2012
- transition-timing-function: ease-out;
2013
- }
2014
- .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 {
2015
- color: rgb(255, 255, 255);
2016
- }
2017
- .ilo--card--factlist .ilo--card--title {
2018
- color: rgb(45, 45, 45);
1786
+ .ilo--card__type__multilink .ilo--card--title {
2019
1787
  font-size: 23.32px;
2020
1788
  letter-spacing: -0.035em;
2021
1789
  line-height: 29.15px;
2022
- margin-bottom: 1.1476152197rem;
1790
+ margin-bottom: 0.7188906752rem;
1791
+ color: rgb(45, 45, 45);
2023
1792
  }
2024
- @media screen and (min-width: 1024px) {
2025
- .ilo--card--factlist .ilo--card--title {
1793
+ @media screen and (min-width: 610px) {
1794
+ .ilo--card__type__multilink .ilo--card--title {
2026
1795
  font-size: 29.16px;
2027
1796
  letter-spacing: -0.035em;
2028
1797
  line-height: 36.45px;
2029
- margin-bottom: 1.4315916399rem;
1798
+ margin-bottom: 0.5741425509rem;
2030
1799
  }
2031
1800
  }
2032
- .ilo--card--stat {
2033
- border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
2034
- margin-top: 2.1436227224rem;
2035
- padding: 0 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2036
- position: relative;
2037
- width: 100%;
2038
- }
2039
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2040
- left: 0;
2041
- top: -2.127545552rem;
2042
- }
2043
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2044
- left: auto;
2045
- right: 0;
2046
- }
2047
- .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2048
- right: 0;
2049
- top: -2.127545552rem;
2050
- }
2051
- .right-to-left .ilo--card--stat.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2052
- left: 0;
2053
- right: auto;
2054
- transform: rotateY(180deg);
2055
- }
2056
- .ilo--card--stat.ilo--card--blue {
2057
- background: rgb(235, 245, 253);
2058
- }
2059
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2060
- background: inherit;
2061
- content: "";
2062
- display: block;
2063
- height: 40px;
2064
- position: absolute;
2065
- width: calc(100% - 73px);
2066
- }
2067
- .ilo--card--stat.ilo--card--blue.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2068
- 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");
2069
- background-position: bottom right;
2070
- background-size: cover;
2071
- content: "";
2072
- height: 40px;
2073
- display: block;
2074
- position: absolute;
2075
- width: 73.4px;
2076
- }
2077
- .ilo--card--stat.ilo--card--yellow {
2078
- background: rgb(255, 205, 45);
2079
- }
2080
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2081
- background: inherit;
2082
- content: "";
2083
- display: block;
2084
- height: 40px;
2085
- position: absolute;
2086
- width: calc(100% - 73px);
2087
- }
2088
- .ilo--card--stat.ilo--card--yellow.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2089
- 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");
2090
- background-position: bottom right;
2091
- background-size: cover;
2092
- content: "";
2093
- height: 40px;
2094
- display: block;
2095
- position: absolute;
2096
- width: 73.4px;
2097
- }
2098
- .ilo--card--stat.ilo--card--green {
2099
- background: rgb(140, 225, 100);
2100
- }
2101
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2102
- background: inherit;
2103
- content: "";
2104
- display: block;
2105
- height: 40px;
2106
- position: absolute;
2107
- width: calc(100% - 73px);
2108
- }
2109
- .ilo--card--stat.ilo--card--green.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2110
- 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");
2111
- background-position: bottom right;
2112
- background-size: cover;
2113
- content: "";
2114
- height: 40px;
2115
- display: block;
2116
- position: absolute;
2117
- width: 73.4px;
2118
- }
2119
- .ilo--card--stat.ilo--card--turquoise {
2120
- background: rgb(5, 210, 210);
2121
- }
2122
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
2123
- background: inherit;
2124
- content: "";
2125
- display: block;
2126
- height: 40px;
2127
- position: absolute;
2128
- width: calc(100% - 73px);
2129
- }
2130
- .ilo--card--stat.ilo--card--turquoise.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::after {
2131
- 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");
2132
- background-position: bottom right;
2133
- background-size: cover;
2134
- content: "";
2135
- height: 40px;
2136
- display: block;
2137
- position: absolute;
2138
- width: 73.4px;
2139
- }
2140
- .ilo--card--stat .ilo--card--content {
2141
- display: flex;
2142
- flex-wrap: wrap;
2143
- height: 100%;
2144
- }
2145
- .right-to-left .ilo--card--stat .ilo--card--content {
2146
- flex-direction: row-reverse;
1801
+ .ilo--card__type__multilink .ilo--card--intro {
1802
+ font-size: 16px;
1803
+ letter-spacing: normal;
1804
+ line-height: 23.36px;
1805
+ margin-bottom: 1.910132288rem;
1806
+ color: rgb(45, 45, 45);
2147
1807
  }
2148
- .ilo--card--stat .ilo--card--title {
2149
- color: rgb(35, 0, 80);
2150
- font-size: 36.45px;
2151
- letter-spacing: -0.035em;
2152
- line-height: 43.74px;
2153
- margin-bottom: 0.4278063594rem;
2154
- width: 100%;
1808
+ @media screen and (min-width: 610px) {
1809
+ .ilo--card__type__multilink .ilo--card--intro {
1810
+ font-size: 18.66px;
1811
+ letter-spacing: normal;
1812
+ line-height: 27.24px;
1813
+ margin-bottom: 1.8685411561rem;
1814
+ }
2155
1815
  }
2156
- .ilo--card--stat .ilo--card--intro {
2157
- color: rgb(35, 0, 80);
2158
- font-family: Overpass;
2159
- font-size: 18.66px;
2160
- letter-spacing: normal;
2161
- line-height: 27.24px;
2162
- margin-bottom: 1.6734954235rem;
2163
- width: 100%;
1816
+ .ilo--card__type__multilink.ilo--card__size__standard {
1817
+ --max-width: 28.7245444802rem;
1818
+ padding: 2.5723472669rem 2.1436227224rem;
2164
1819
  }
2165
- .ilo--card--stat .ilo--link {
2166
- font-size: 11.94px;
2167
- letter-spacing: -0.02em;
2168
- line-height: 16.24px;
2169
- align-self: flex-end;
1820
+ @media screen and (min-width: 610px) {
1821
+ .ilo--card__type__multilink.ilo--card__size__standard {
1822
+ padding: 2.5723472669rem 2.1436227224rem;
1823
+ }
2170
1824
  }
2171
- .ilo--card--data {
2172
- background: rgb(235, 245, 253);
2173
- border-bottom: 0.1607717042rem solid #82afdc;
2174
- margin-top: 2.1436227224rem;
2175
- max-width: 32.154340836rem;
2176
- padding: 0 1.2861736334rem 3.0010718114rem;
2177
- position: relative;
1825
+ @media screen and (min-width: 1024px) {
1826
+ .ilo--card__type__multilink.ilo--card__size__standard {
1827
+ padding: 2.5723472669rem 2.1436227224rem;
1828
+ }
2178
1829
  }
2179
- .ilo--card--data::before {
2180
- background: inherit;
2181
- content: "";
2182
- display: block;
2183
- height: 40px;
2184
- position: absolute;
2185
- width: calc(100% - 73px);
1830
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1831
+ --max-width: 20.0964630225rem;
1832
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
2186
1833
  }
2187
- .ilo--card--data::after {
2188
- 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");
2189
- background-position: bottom right;
2190
- background-size: cover;
2191
- content: "";
2192
- height: 40px;
2193
- display: block;
2194
- position: absolute;
2195
- width: 73.4px;
1834
+ @media screen and (min-width: 610px) {
1835
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1836
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1837
+ }
2196
1838
  }
2197
- .ilo--card--data:hover, .ilo--card--data:focus, .ilo--card--data:focus-within {
2198
- background: rgb(235, 245, 253);
1839
+ @media screen and (min-width: 1024px) {
1840
+ .ilo--card__type__multilink.ilo--card__size__narrow {
1841
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
1842
+ }
2199
1843
  }
2200
- .ilo--card--data::before {
2201
- left: 0;
2202
- top: -2.127545552rem;
1844
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper {
1845
+ display: none;
2203
1846
  }
2204
- .right-to-left .ilo--card--data::before {
2205
- left: auto;
2206
- right: 0;
1847
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper {
1848
+ display: block;
1849
+ margin-bottom: 1.2861736334rem;
2207
1850
  }
2208
- .ilo--card--data::after {
2209
- right: 0;
2210
- top: -2.127545552rem;
1851
+ @media screen and (min-width: 610px) {
1852
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title {
1853
+ font-size: 23.32px;
1854
+ letter-spacing: -0.035em;
1855
+ line-height: 29.15px;
1856
+ margin-bottom: 0.7188906752rem;
1857
+ }
2211
1858
  }
2212
- .right-to-left .ilo--card--data::after {
2213
- left: 0;
2214
- right: auto;
2215
- transform: rotateY(180deg);
1859
+ @media screen and (min-width: 610px) {
1860
+ .ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro {
1861
+ font-size: 16px;
1862
+ letter-spacing: normal;
1863
+ line-height: 23.36px;
1864
+ margin-bottom: 1.910132288rem;
1865
+ }
1866
+ }
1867
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1868
+ --max-width: 59.1639871383rem;
1869
+ padding: 2.1436227224rem 1.2861736334rem 2.5723472669rem;
2216
1870
  }
2217
1871
  @media screen and (min-width: 610px) {
2218
- .ilo--card--data::before {
2219
- background: inherit;
2220
- content: "";
2221
- display: block;
2222
- height: 48px;
2223
- position: absolute;
2224
- width: calc(100% - 84px);
1872
+ .ilo--card__type__multilink.ilo--card__size__wide, .ilo--card__type__multilink.ilo--card__size__fluid {
1873
+ padding: 3.0010718114rem 2.5723472669rem;
2225
1874
  }
2226
- .ilo--card--data::after {
2227
- 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");
2228
- background-position: bottom right;
2229
- background-size: cover;
2230
- content: "";
2231
- height: 48px;
1875
+ .ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap, .ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap {
1876
+ flex-direction: row-reverse;
1877
+ }
1878
+ .right-to-left .ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap, .right-to-left .ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap {
1879
+ flex-direction: row;
1880
+ }
1881
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap {
1882
+ display: flex;
1883
+ column-gap: 1.7148981779rem;
1884
+ }
1885
+ .right-to-left .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap, .right-to-left .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap {
1886
+ flex-direction: row-reverse;
1887
+ }
1888
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper {
2232
1889
  display: block;
2233
- position: absolute;
2234
- width: 84.4px;
1890
+ width: 50%;
2235
1891
  }
2236
- .ilo--card--data::before {
2237
- top: -2.5562700965rem;
1892
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content {
1893
+ width: 50%;
2238
1894
  }
2239
- .ilo--card--data::after {
2240
- top: -2.5562700965rem;
1895
+ .ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content .ilo--card--image--wrapper, .ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content .ilo--card--image--wrapper {
1896
+ display: none;
2241
1897
  }
2242
1898
  }
2243
- .ilo--card--data .ilo--card--image--wrapper {
2244
- display: none;
2245
- width: max(10.9860664523rem, 50%);
1899
+ .ilo--card__type__multilink .ilo--link-list {
1900
+ margin-top: 1.8756698821rem;
1901
+ position: relative;
1902
+ z-index: 3;
2246
1903
  }
2247
- .ilo--card--data .ilo--card--content .ilo--card--image--wrapper {
2248
- display: block;
1904
+
1905
+ /**
1906
+ * Do not edit directly
1907
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1908
+ */
1909
+ /**
1910
+ * TOKENS:
1911
+ */
1912
+ /**
1913
+ * MAPS:
1914
+ */
1915
+ .ilo--card__type__data {
1916
+ --max-width: 16.1307609861rem;
1917
+ background: rgb(235, 245, 253);
1918
+ border-bottom: 0.1607717042rem solid #82afdc;
1919
+ margin-top: 2.1436227224rem;
1920
+ padding: 1.2861736334rem 3.0010718114rem;
1921
+ position: relative;
1922
+ width: 100%;
1923
+ }
1924
+ .ilo--card__type__data:hover, .ilo--card__type__data:focus, .ilo--card__type__data:focus-within {
1925
+ background: rgb(235, 245, 253);
1926
+ }
1927
+ .ilo--card__type__data.ilo--card__size__narrow {
1928
+ --max-width: 16.1307609861rem;
1929
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
1930
+ }
1931
+ .ilo--card__type__data.ilo--card__size__wide, .ilo--card__type__data.ilo--card__size__fluid {
1932
+ --max-width: 32.154340836rem;
1933
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
1934
+ }
1935
+ .ilo--card__type__data .ilo--card--image--wrapper {
1936
+ width: max(10.9860664523rem, 50%);
2249
1937
  }
2250
- .ilo--card--data--content-label {
1938
+ .ilo--card__type__data--content-label {
2251
1939
  font-size: 14.93px;
2252
1940
  letter-spacing: normal;
2253
1941
  line-height: 20.3px;
2254
1942
  margin-bottom: 0.6540478038rem;
2255
1943
  color: rgb(109, 109, 109);
2256
1944
  }
2257
- .ilo--card--data--content-copy {
1945
+ .ilo--card__type__data--content-copy {
2258
1946
  font-size: 23.32px;
2259
1947
  letter-spacing: -0.035em;
2260
1948
  line-height: 29.15px;
@@ -2263,175 +1951,161 @@ body {
2263
1951
  font-family: Overpass;
2264
1952
  font-weight: 500;
2265
1953
  }
2266
- .ilo--card--data--content-files {
1954
+ .ilo--card__type__data--content-files {
2267
1955
  margin-bottom: 2.1436227224rem;
2268
1956
  }
2269
- .ilo--card--data .ilo--link {
1957
+ .ilo--card__type__data .ilo--link {
2270
1958
  font-size: 18.66px;
2271
1959
  letter-spacing: -0.035em;
2272
1960
  line-height: 24.26px;
2273
1961
  }
2274
- .ilo--card--data--file {
1962
+ .ilo--card__type__data--file {
2275
1963
  margin: 0.2143622722rem 0.4287245445rem 0.2143622722rem 0;
2276
1964
  }
2277
- .ilo--card--data--file:last-of-type {
1965
+ .ilo--card__type__data--file:last-of-type {
2278
1966
  margin-right: 0;
2279
1967
  }
2280
- .ilo--card--feature {
2281
- border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2282
- display: flex;
2283
- margin-top: 0;
1968
+
1969
+ /**
1970
+ * Do not edit directly
1971
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
1972
+ */
1973
+ /**
1974
+ * TOKENS:
1975
+ */
1976
+ /**
1977
+ * MAPS:
1978
+ */
1979
+ .ilo--card__type__stat {
1980
+ --max-width: 18.3815648446rem;
1981
+ border-bottom: 0.1607717042rem solid rgb(150, 10, 85);
1982
+ padding: 1.2861736334rem 2.1436227224rem 1.1789924973rem;
2284
1983
  position: relative;
1984
+ width: 100%;
1985
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2285
1986
  }
2286
- .ilo--card--feature::before {
2287
- display: none;
1987
+ .ilo--card__type__stat.ilo--card__color__blue {
1988
+ background: rgb(235, 245, 253);
2288
1989
  }
2289
- .ilo--card--feature.ilo--card--dark {
2290
- border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
1990
+ .ilo--card__type__stat.ilo--card__color__yellow {
1991
+ background: rgb(255, 205, 45);
2291
1992
  }
2292
- .ilo--card--feature.ilo--card--dark .ilo--link-list {
2293
- border-top: 2px solid rgba(237, 240, 242, 0.25);
1993
+ .ilo--card__type__stat.ilo--card__color__green {
1994
+ background: rgb(140, 225, 100);
2294
1995
  }
2295
- .ilo--card--feature.ilo--card--dark .ilo--link-list--link {
2296
- color: rgb(255, 255, 255);
2297
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(255, 255, 255)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1996
+ .ilo--card__type__stat.ilo--card__color__turquoise {
1997
+ background: rgb(5, 210, 210);
2298
1998
  }
2299
- .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 {
2300
- color: rgb(30, 45, 190);
2301
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='rgb(30, 45, 190)' d='M8.63792 19.9964L7.6499 19.0082L14.6571 11.9999L7.6499 4.99159L8.63792 4.00342L16.1426 11.5023C16.2083 11.5675 16.2604 11.645 16.296 11.7304C16.3316 11.8158 16.3499 11.9074 16.3499 11.9999C16.3499 12.0924 16.3316 12.184 16.296 12.2694C16.2604 12.3548 16.2083 12.4324 16.1426 12.4975L8.63792 19.9964Z'/%3e%3c/svg%3e");
1999
+ .ilo--card__type__stat .ilo--card--content {
2000
+ display: flex;
2001
+ flex-wrap: wrap;
2002
+ height: 100%;
2302
2003
  }
2303
- .ilo--card--feature picture::before {
2304
- transition-property: opacity;
2305
- transition-duration: 150ms;
2306
- transition-timing-function: ease-out;
2004
+ .right-to-left .ilo--card__type__stat .ilo--card--content {
2005
+ flex-direction: row-reverse;
2307
2006
  }
2308
- .ilo--card--feature:hover, .ilo--card--feature:focus, .ilo--card--feature:focus-within {
2309
- background-color: rgb(255, 255, 255);
2310
- 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));
2311
- border-bottom: 0.1607717042rem solid rgb(30, 45, 190);
2007
+ .ilo--card__type__stat .ilo--card--title {
2008
+ color: rgb(35, 0, 80);
2009
+ font-size: 36.45px;
2010
+ letter-spacing: -0.035em;
2011
+ line-height: 43.74px;
2012
+ margin-bottom: 0.4278063594rem;
2013
+ width: 100%;
2312
2014
  }
2313
- .ilo--card--feature:hover picture::before, .ilo--card--feature:focus picture::before, .ilo--card--feature:focus-within picture::before {
2314
- opacity: 0.4;
2315
- z-index: 1;
2316
- transition-property: opacity;
2317
- transition-duration: 150ms;
2318
- transition-timing-function: ease-out;
2015
+ .ilo--card__type__stat .ilo--card--intro {
2016
+ color: rgb(35, 0, 80);
2017
+ font-family: Overpass;
2018
+ font-size: 18.66px;
2019
+ letter-spacing: normal;
2020
+ line-height: 27.24px;
2021
+ margin-bottom: 1.6734954235rem;
2022
+ width: 100%;
2319
2023
  }
2320
- .ilo--card--feature:hover .ilo--card--image, .ilo--card--feature:focus .ilo--card--image, .ilo--card--feature:focus-within .ilo--card--image {
2321
- filter: saturate(0);
2024
+ .ilo--card__type__stat .ilo--link {
2025
+ font-size: 11.94px;
2026
+ letter-spacing: -0.02em;
2027
+ line-height: 16.24px;
2028
+ align-self: flex-end;
2322
2029
  }
2323
- .ilo--card--feature .ilo--link-list {
2324
- border-top: 0.1071811361rem solid rgb(237, 240, 242);
2325
- margin-left: -1.2861736334rem;
2326
- margin-right: -1.2861736334rem;
2327
- margin-top: 1.822079314rem;
2328
- position: relative;
2329
- z-index: 2;
2030
+
2031
+ /**
2032
+ * Do not edit directly
2033
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2034
+ */
2035
+ /**
2036
+ * TOKENS:
2037
+ */
2038
+ /**
2039
+ * MAPS:
2040
+ */
2041
+ .ilo--card__type__factlist {
2042
+ --max-width: 20.0964630225rem;
2043
+ border-bottom: 0.1607717042rem solid rgb(184, 196, 204);
2044
+ padding: 1.2861736334rem 2.5723472669rem;
2045
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2330
2046
  }
2331
- .ilo--card--feature .ilo--link-list--link, .ilo--card--feature .ilo--link-list--link:hover {
2332
- border-bottom: none;
2333
- padding-left: 1.2861736334rem;
2334
- padding-right: 1.2861736334rem;
2047
+ @media screen and (min-width: 1024px) {
2048
+ .ilo--card__type__factlist {
2049
+ padding: 2.1436227224rem 3.0010718114rem;
2050
+ }
2335
2051
  }
2336
- .ilo--card--feature.ilo--card--narrow .ilo--card--wrap, .ilo--card--feature.ilo--card--standard .ilo--card--wrap {
2337
- display: flex;
2338
- flex-wrap: wrap;
2339
- width: 100%;
2052
+ .ilo--card__type__factlist.ilo--card__size__wide {
2053
+ --max-width: 45.8735262594rem;
2054
+ padding: 2.1436227224rem 2.7867095391rem;
2340
2055
  }
2341
- .ilo--card--feature.ilo--card--narrow .ilo--card--content, .ilo--card--feature.ilo--card--standard .ilo--card--content {
2342
- width: 100%;
2056
+ @media screen and (min-width: 610px) {
2057
+ .ilo--card__type__factlist.ilo--card__size__wide {
2058
+ padding: 2.1436227224rem 3.2154340836rem;
2059
+ clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
2060
+ }
2343
2061
  }
2344
- .ilo--card--feature.ilo--card--narrow .ilo--card--image--wrapper, .ilo--card--feature.ilo--card--standard .ilo--card--image--wrapper {
2345
- width: 100%;
2062
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2063
+ --max-width: 20.0964630225rem;
2064
+ padding: 1.2861736334rem 2.5723472669rem;
2065
+ clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
2346
2066
  }
2347
2067
  @media screen and (min-width: 610px) {
2348
- .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2349
- flex-direction: row;
2350
- }
2351
- .right-to-left .ilo--card--feature.ilo--card--wide .ilo--card--wrap {
2352
- flex-direction: row-reverse;
2353
- }
2354
- .ilo--card--feature.ilo--card--wide .ilo--card--content {
2355
- display: flex;
2356
- flex-direction: row;
2357
- flex-wrap: wrap;
2358
- position: relative;
2359
- width: 50%;
2360
- }
2361
- .ilo--card--feature.ilo--card--wide .ilo--card--image--wrapper {
2362
- width: 50%;
2363
- }
2364
- .ilo--card--feature.ilo--card--wide .ilo--card--image {
2365
- object-fit: cover;
2366
- }
2367
- .ilo--card--feature.ilo--card--wide .ilo--card--date {
2368
- align-self: flex-end;
2369
- width: 100%;
2370
- }
2371
- .ilo--card--feature.ilo--card--wide .ilo--card--eyebrow {
2372
- width: 100%;
2373
- }
2374
- .ilo--card--feature.ilo--card--wide .ilo--card--title {
2375
- width: 100%;
2376
- }
2377
- .ilo--card--feature.ilo--card--wide .ilo--link-list {
2378
- width: calc(100% + 48px);
2068
+ .ilo--card__type__factlist.ilo--card__size__narrow {
2069
+ padding: 1.2861736334rem 2.5723472669rem;
2379
2070
  }
2380
2071
  }
2381
- .ilo--card--feature .ilo--card--wrap {
2382
- display: flex;
2383
- flex-direction: column;
2384
- width: 100%;
2072
+ .ilo--card__type__factlist.ilo--card__theme__dark {
2073
+ border-bottom: 0.1607717042rem solid rgb(250, 60, 75);
2385
2074
  }
2386
- .ilo--card--feature picture {
2387
- display: flex;
2388
- height: 100%;
2389
- position: relative;
2075
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--card--title {
2076
+ color: rgb(255, 255, 255);
2390
2077
  }
2391
- .ilo--card--feature picture::before {
2392
- background-color: rgb(30, 45, 190);
2393
- content: "";
2394
- display: block;
2395
- height: 100%;
2396
- left: 0;
2397
- opacity: 0;
2398
- position: absolute;
2399
- top: 0;
2400
- transition: opacity 150ms ease-in-out;
2401
- width: 100%;
2402
- z-index: -1;
2078
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item {
2079
+ color: rgb(255, 255, 255);
2403
2080
  }
2404
- .ilo--card--feature .ilo--card--content {
2405
- display: flex;
2406
- flex: 1 1 auto;
2407
- flex-direction: column;
2408
- padding: 1.2861736334rem 1.2861736334rem 2.1436227224rem;
2081
+ .ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item:last-of-type {
2082
+ margin-bottom: 0;
2409
2083
  }
2410
- .ilo--card--feature.ilo--card--linklist .ilo--card--content {
2411
- padding-bottom: 0;
2084
+ .ilo--card__type__factlist.ilo--card__theme__dark:hover .ilo--card--title, .ilo--card__type__factlist.ilo--card__theme__dark:focus .ilo--card--title, .ilo--card__type__factlist.ilo--card__theme__dark:focus-within .ilo--card--title {
2085
+ color: rgb(255, 255, 255);
2086
+ }
2087
+ .ilo--card__type__factlist.ilo--card__theme__dark:hover .ilo--list__item, .ilo--card__type__factlist.ilo--card__theme__dark:focus .ilo--list__item, .ilo--card__type__factlist.ilo--card__theme__dark:focus-within .ilo--list__item {
2088
+ color: rgb(255, 255, 255);
2412
2089
  }
2413
- .ilo--card--feature .ilo--card--title {
2090
+ .ilo--card__type__factlist .ilo--card--title {
2091
+ color: rgb(45, 45, 45);
2414
2092
  font-size: 23.32px;
2415
2093
  letter-spacing: -0.035em;
2416
2094
  line-height: 29.15px;
2417
- margin-bottom: 1.5763397642rem;
2418
- font-family: Overpass;
2419
- font-weight: 700;
2420
- }
2421
- .ilo--card--feature .ilo--card--eyebrow {
2422
- font-size: 14.93px;
2423
- letter-spacing: normal;
2424
- line-height: 19.71px;
2425
- margin-bottom: 0.3376482577rem;
2095
+ margin-bottom: 1.1476152197rem;
2426
2096
  }
2427
- .ilo--card--feature .ilo--card--date {
2428
- margin-bottom: 0;
2429
- margin-top: auto;
2097
+ @media screen and (min-width: 1024px) {
2098
+ .ilo--card__type__factlist .ilo--card--title {
2099
+ font-size: 29.16px;
2100
+ letter-spacing: -0.035em;
2101
+ line-height: 36.45px;
2102
+ margin-bottom: 1.4315916399rem;
2103
+ }
2430
2104
  }
2431
2105
 
2432
2106
  /**
2433
2107
  * Do not edit directly
2434
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2108
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2435
2109
  */
2436
2110
  /**
2437
2111
  * TOKENS:
@@ -2439,34 +2113,29 @@ body {
2439
2113
  /**
2440
2114
  * MAPS:
2441
2115
  */
2116
+ .ilo--cardgroup__collapsed .ilo--cardgroup--inner {
2117
+ gap: 0;
2118
+ }
2119
+ .ilo--cardgroup__justify__start .ilo--cardgroup--inner {
2120
+ justify-content: flex-start;
2121
+ }
2122
+ .ilo--cardgroup__justify__between .ilo--cardgroup--inner {
2123
+ justify-content: space-between;
2124
+ }
2125
+ .ilo--cardgroup__justify__center .ilo--cardgroup--inner {
2126
+ justify-content: center;
2127
+ }
2442
2128
  .ilo--cardgroup--inner {
2443
2129
  display: flex;
2444
- flex-wrap: wrap;
2445
- justify-content: space-between;
2130
+ flex-flow: row wrap;
2131
+ justify-content: center;
2446
2132
  margin: auto;
2447
- row-gap: 1.7148981779rem;
2133
+ gap: 1.7148981779rem;
2134
+ width: 100%;
2448
2135
  }
2449
2136
  .right-to-left .ilo--cardgroup--inner {
2450
2137
  flex-direction: row-reverse;
2451
2138
  }
2452
- .ilo--cardgroup--inner .ilo--card {
2453
- width: 100%;
2454
- }
2455
- @media screen and (min-width: 1024px) {
2456
- .ilo--cardgroup--two .ilo--card {
2457
- width: calc(50% - 24px);
2458
- }
2459
- }
2460
- @media screen and (min-width: 1024px) {
2461
- .ilo--cardgroup--three .ilo--card {
2462
- width: calc(33.333% - 24px);
2463
- }
2464
- }
2465
- @media screen and (min-width: 1024px) {
2466
- .ilo--cardgroup--four .ilo--card {
2467
- width: calc(25% - 24px);
2468
- }
2469
- }
2470
2139
  .ilo--cardgroup--button-wrap {
2471
2140
  display: flex;
2472
2141
  justify-content: center;
@@ -2476,7 +2145,7 @@ body {
2476
2145
 
2477
2146
  /**
2478
2147
  * Do not edit directly
2479
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2148
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2480
2149
  */
2481
2150
  /**
2482
2151
  * TOKENS:
@@ -2581,7 +2250,7 @@ body {
2581
2250
 
2582
2251
  /**
2583
2252
  * Do not edit directly
2584
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2253
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2585
2254
  */
2586
2255
  /**
2587
2256
  * 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:
@@ -2672,7 +2341,7 @@ body {
2672
2341
  */
2673
2342
  /**
2674
2343
  * Do not edit directly
2675
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2344
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2676
2345
  */
2677
2346
  /**
2678
2347
  * TOKENS:
@@ -2682,7 +2351,7 @@ body {
2682
2351
  */
2683
2352
  /**
2684
2353
  * Do not edit directly
2685
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2354
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2686
2355
  */
2687
2356
  /**
2688
2357
  * TOKENS:
@@ -2692,7 +2361,7 @@ body {
2692
2361
  */
2693
2362
  /**
2694
2363
  * Do not edit directly
2695
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2364
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2696
2365
  */
2697
2366
  /**
2698
2367
  * TOKENS:
@@ -2818,7 +2487,7 @@ body {
2818
2487
 
2819
2488
  /**
2820
2489
  * Do not edit directly
2821
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2490
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2822
2491
  */
2823
2492
  /**
2824
2493
  * TOKENS:
@@ -2846,7 +2515,7 @@ body {
2846
2515
 
2847
2516
  /**
2848
2517
  * Do not edit directly
2849
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2518
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2850
2519
  */
2851
2520
  /**
2852
2521
  * TOKENS:
@@ -2934,7 +2603,7 @@ body {
2934
2603
 
2935
2604
  /**
2936
2605
  * Do not edit directly
2937
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2606
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2938
2607
  */
2939
2608
  /**
2940
2609
  * TOKENS:
@@ -2944,7 +2613,7 @@ body {
2944
2613
  */
2945
2614
  /**
2946
2615
  * Do not edit directly
2947
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2616
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2948
2617
  */
2949
2618
  /**
2950
2619
  * TOKENS:
@@ -2954,7 +2623,7 @@ body {
2954
2623
  */
2955
2624
  /**
2956
2625
  * Do not edit directly
2957
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2626
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
2958
2627
  */
2959
2628
  /**
2960
2629
  * TOKENS:
@@ -3007,7 +2676,7 @@ body {
3007
2676
 
3008
2677
  /**
3009
2678
  * Do not edit directly
3010
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2679
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3011
2680
  */
3012
2681
  /**
3013
2682
  * TOKENS:
@@ -3082,7 +2751,7 @@ body {
3082
2751
 
3083
2752
  /**
3084
2753
  * Do not edit directly
3085
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2754
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3086
2755
  */
3087
2756
  /**
3088
2757
  * TOKENS:
@@ -3188,7 +2857,7 @@ body {
3188
2857
 
3189
2858
  /**
3190
2859
  * Do not edit directly
3191
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2860
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3192
2861
  */
3193
2862
  /**
3194
2863
  * TOKENS:
@@ -3211,7 +2880,7 @@ body {
3211
2880
 
3212
2881
  /**
3213
2882
  * Do not edit directly
3214
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2883
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3215
2884
  */
3216
2885
  /**
3217
2886
  * TOKENS:
@@ -3225,7 +2894,7 @@ body {
3225
2894
 
3226
2895
  /**
3227
2896
  * Do not edit directly
3228
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2897
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3229
2898
  */
3230
2899
  /**
3231
2900
  * TOKENS:
@@ -3235,7 +2904,7 @@ body {
3235
2904
  */
3236
2905
  /**
3237
2906
  * Do not edit directly
3238
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2907
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3239
2908
  */
3240
2909
  /**
3241
2910
  * TOKENS:
@@ -3260,7 +2929,7 @@ body {
3260
2929
  }
3261
2930
  /**
3262
2931
  * Do not edit directly
3263
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
2932
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3264
2933
  */
3265
2934
  /**
3266
2935
  * TOKENS:
@@ -3584,7 +3253,7 @@ body {
3584
3253
 
3585
3254
  /**
3586
3255
  * Do not edit directly
3587
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3256
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3588
3257
  */
3589
3258
  /**
3590
3259
  * TOKENS:
@@ -3707,7 +3376,7 @@ body {
3707
3376
 
3708
3377
  /**
3709
3378
  * Do not edit directly
3710
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3379
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3711
3380
  */
3712
3381
  /**
3713
3382
  * TOKENS:
@@ -3913,7 +3582,7 @@ body {
3913
3582
 
3914
3583
  /**
3915
3584
  * Do not edit directly
3916
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3585
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
3917
3586
  */
3918
3587
  /**
3919
3588
  * TOKENS:
@@ -3924,7 +3593,7 @@ body {
3924
3593
  .ilo--hero-card {
3925
3594
  height: 100%;
3926
3595
  position: relative;
3927
- padding: 39px 16px;
3596
+ padding: 40px 16px;
3928
3597
  }
3929
3598
  @media screen and (min-width: 1024px) {
3930
3599
  .ilo--hero-card {
@@ -3969,12 +3638,7 @@ body {
3969
3638
  }
3970
3639
  }
3971
3640
  .ilo--hero-card__cornercut {
3972
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 39px, 100% 100%, 0 100%);
3973
- }
3974
- @media screen and (min-width: 1024px) {
3975
- .ilo--hero-card__cornercut {
3976
- clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
3977
- }
3641
+ clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
3978
3642
  }
3979
3643
  .ilo--hero-card--datecopy {
3980
3644
  font-size: 16px;
@@ -4039,7 +3703,7 @@ body {
4039
3703
 
4040
3704
  /**
4041
3705
  * Do not edit directly
4042
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3706
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4043
3707
  */
4044
3708
  /**
4045
3709
  * TOKENS:
@@ -4095,7 +3759,7 @@ body {
4095
3759
 
4096
3760
  /**
4097
3761
  * Do not edit directly
4098
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3762
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4099
3763
  */
4100
3764
  /**
4101
3765
  * TOKENS:
@@ -4237,7 +3901,7 @@ body {
4237
3901
 
4238
3902
  /**
4239
3903
  * Do not edit directly
4240
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3904
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4241
3905
  */
4242
3906
  /**
4243
3907
  * TOKENS:
@@ -4247,7 +3911,7 @@ body {
4247
3911
  */
4248
3912
  /**
4249
3913
  * Do not edit directly
4250
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3914
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4251
3915
  */
4252
3916
  /**
4253
3917
  * TOKENS:
@@ -4272,7 +3936,7 @@ body {
4272
3936
  }
4273
3937
  /**
4274
3938
  * Do not edit directly
4275
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
3939
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4276
3940
  */
4277
3941
  /**
4278
3942
  * TOKENS:
@@ -4430,7 +4094,7 @@ body {
4430
4094
 
4431
4095
  /**
4432
4096
  * Do not edit directly
4433
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4097
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4434
4098
  */
4435
4099
  /**
4436
4100
  * TOKENS:
@@ -4525,7 +4189,7 @@ body {
4525
4189
 
4526
4190
  /**
4527
4191
  * Do not edit directly
4528
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4192
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4529
4193
  */
4530
4194
  /**
4531
4195
  * TOKENS:
@@ -4535,7 +4199,7 @@ body {
4535
4199
  */
4536
4200
  /**
4537
4201
  * Do not edit directly
4538
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4202
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4539
4203
  */
4540
4204
  /**
4541
4205
  * TOKENS:
@@ -4545,7 +4209,7 @@ body {
4545
4209
  */
4546
4210
  /**
4547
4211
  * Do not edit directly
4548
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4212
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4549
4213
  */
4550
4214
  /**
4551
4215
  * TOKENS:
@@ -4716,7 +4380,7 @@ body {
4716
4380
 
4717
4381
  /**
4718
4382
  * Do not edit directly
4719
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4383
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4720
4384
  */
4721
4385
  /**
4722
4386
  * TOKENS:
@@ -4763,7 +4427,7 @@ body {
4763
4427
 
4764
4428
  /**
4765
4429
  * Do not edit directly
4766
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4430
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4767
4431
  */
4768
4432
  /**
4769
4433
  * TOKENS:
@@ -4773,7 +4437,7 @@ body {
4773
4437
  */
4774
4438
  /**
4775
4439
  * Do not edit directly
4776
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4440
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4777
4441
  */
4778
4442
  /**
4779
4443
  * TOKENS:
@@ -4783,7 +4447,7 @@ body {
4783
4447
  */
4784
4448
  /**
4785
4449
  * Do not edit directly
4786
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4450
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4787
4451
  */
4788
4452
  /**
4789
4453
  * TOKENS:
@@ -4880,7 +4544,7 @@ body {
4880
4544
 
4881
4545
  /**
4882
4546
  * Do not edit directly
4883
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
4547
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
4884
4548
  */
4885
4549
  /**
4886
4550
  * TOKENS:
@@ -5770,7 +5434,7 @@ body {
5770
5434
 
5771
5435
  /**
5772
5436
  * Do not edit directly
5773
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5437
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5774
5438
  */
5775
5439
  /**
5776
5440
  * TOKENS:
@@ -5780,7 +5444,7 @@ body {
5780
5444
  */
5781
5445
  /**
5782
5446
  * Do not edit directly
5783
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5447
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5784
5448
  */
5785
5449
  /**
5786
5450
  * TOKENS:
@@ -5790,7 +5454,7 @@ body {
5790
5454
  */
5791
5455
  /**
5792
5456
  * Do not edit directly
5793
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5457
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5794
5458
  */
5795
5459
  /**
5796
5460
  * TOKENS:
@@ -5982,7 +5646,7 @@ body {
5982
5646
 
5983
5647
  /**
5984
5648
  * Do not edit directly
5985
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5649
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
5986
5650
  */
5987
5651
  /**
5988
5652
  * TOKENS:
@@ -6122,7 +5786,7 @@ body {
6122
5786
 
6123
5787
  /**
6124
5788
  * Do not edit directly
6125
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5789
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6126
5790
  */
6127
5791
  /**
6128
5792
  * TOKENS:
@@ -6132,7 +5796,7 @@ body {
6132
5796
  */
6133
5797
  /**
6134
5798
  * Do not edit directly
6135
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5799
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6136
5800
  */
6137
5801
  /**
6138
5802
  * TOKENS:
@@ -6157,7 +5821,7 @@ body {
6157
5821
  }
6158
5822
  /**
6159
5823
  * Do not edit directly
6160
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5824
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6161
5825
  */
6162
5826
  /**
6163
5827
  * TOKENS:
@@ -6324,7 +5988,7 @@ body {
6324
5988
 
6325
5989
  /**
6326
5990
  * Do not edit directly
6327
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
5991
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6328
5992
  */
6329
5993
  /**
6330
5994
  * TOKENS:
@@ -6431,7 +6095,7 @@ body {
6431
6095
 
6432
6096
  /**
6433
6097
  * Do not edit directly
6434
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6098
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6435
6099
  */
6436
6100
  /**
6437
6101
  * TOKENS:
@@ -6441,7 +6105,7 @@ body {
6441
6105
  */
6442
6106
  /**
6443
6107
  * Do not edit directly
6444
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6108
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6445
6109
  */
6446
6110
  /**
6447
6111
  * TOKENS:
@@ -6466,7 +6130,7 @@ body {
6466
6130
  }
6467
6131
  /**
6468
6132
  * Do not edit directly
6469
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6133
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6470
6134
  */
6471
6135
  /**
6472
6136
  * TOKENS:
@@ -6527,7 +6191,7 @@ body {
6527
6191
 
6528
6192
  /**
6529
6193
  * Do not edit directly
6530
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6194
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6531
6195
  */
6532
6196
  /**
6533
6197
  * TOKENS:
@@ -6942,7 +6606,7 @@ body {
6942
6606
 
6943
6607
  /**
6944
6608
  * Do not edit directly
6945
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6609
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
6946
6610
  */
6947
6611
  /**
6948
6612
  * TOKENS:
@@ -6996,7 +6660,7 @@ body {
6996
6660
 
6997
6661
  /**
6998
6662
  * Do not edit directly
6999
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6663
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7000
6664
  */
7001
6665
  /**
7002
6666
  * TOKENS:
@@ -7154,7 +6818,7 @@ body {
7154
6818
 
7155
6819
  /**
7156
6820
  * Do not edit directly
7157
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
6821
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7158
6822
  */
7159
6823
  /**
7160
6824
  * TOKENS:
@@ -7505,7 +7169,7 @@ body {
7505
7169
 
7506
7170
  /**
7507
7171
  * Do not edit directly
7508
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7172
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7509
7173
  */
7510
7174
  /**
7511
7175
  * TOKENS:
@@ -7691,7 +7355,7 @@ body {
7691
7355
 
7692
7356
  /**
7693
7357
  * Do not edit directly
7694
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7358
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7695
7359
  */
7696
7360
  /**
7697
7361
  * TOKENS:
@@ -7749,7 +7413,7 @@ body {
7749
7413
 
7750
7414
  /**
7751
7415
  * Do not edit directly
7752
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7416
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7753
7417
  */
7754
7418
  /**
7755
7419
  * TOKENS:
@@ -7923,7 +7587,7 @@ body {
7923
7587
 
7924
7588
  /**
7925
7589
  * Do not edit directly
7926
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7590
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
7927
7591
  */
7928
7592
  /**
7929
7593
  * TOKENS:
@@ -8098,7 +7762,7 @@ body {
8098
7762
 
8099
7763
  /**
8100
7764
  * Do not edit directly
8101
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
7765
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
8102
7766
  */
8103
7767
  /**
8104
7768
  * TOKENS:
@@ -9008,7 +8672,7 @@ body {
9008
8672
 
9009
8673
  /**
9010
8674
  * Do not edit directly
9011
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
8675
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9012
8676
  */
9013
8677
  /**
9014
8678
  * TOKENS:
@@ -9018,7 +8682,7 @@ body {
9018
8682
  */
9019
8683
  /**
9020
8684
  * Do not edit directly
9021
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
8685
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9022
8686
  */
9023
8687
  /**
9024
8688
  * TOKENS:
@@ -9043,7 +8707,7 @@ body {
9043
8707
  }
9044
8708
  /**
9045
8709
  * Do not edit directly
9046
- * Generated on Fri, 21 Jul 2023 14:22:03 GMT
8710
+ * Generated on Fri, 04 Aug 2023 16:55:28 GMT
9047
8711
  */
9048
8712
  /**
9049
8713
  * TOKENS: