@ilo-org/styles 0.7.1 → 0.8.0

package/build/css/monorepo.css

@@ -151,7 +151,7 @@ select {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -250,7 +250,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -369,7 +369,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -394,7 +394,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -648,7 +648,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -658,7 +658,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -683,7 +683,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -973,7 +973,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1103,7 +1103,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1310,7 +1310,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1474,7 +1474,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1568,7 +1568,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1705,7 +1705,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1836,7 +1836,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1985,7 +1985,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -1994,62 +1994,104 @@ body {
 * MAPS:
 */
 .ilo--card__type__data {
-  --max-width: 16.1307609861rem;
+  --max-width: 32.154340836rem;
   background: rgb(235, 245, 253);
-  border-bottom: 0.1607717042rem solid #82afdc;
-  margin-top: 2.1436227224rem;
-  padding: 1.2861736334rem 3.0010718114rem;
+  border-bottom: 0.1607717042rem solid rgb(190, 220, 250);
+  padding: 2.5723472669rem 2.7867095391rem;
   position: relative;
   width: 100%;
 }
-.ilo--card__type__data:hover, .ilo--card__type__data:focus, .ilo--card__type__data:focus-within {
-  background: rgb(235, 245, 253);
+.ilo--card__type__data .ilo--card--content {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+}
+@media screen and (min-width: 610px) {
+  .ilo--card__type__data {
+    padding: 2.5723472669rem 2.5723472669rem 2.5723472669rem 5.8949624866rem;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content {
+    grid-template-columns: minmax(10.718113612rem, 32%) minmax(53%, 1fr);
+    column-gap: 14%;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--image {
+    grid-column: 1/2;
+    grid-row: 1/span 4;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--content {
+    grid-column: 2/3;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--files {
+    grid-column: 2/3;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--links {
+    grid-column: 2/3;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--content {
+    grid-column: 1/2;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--files {
+    grid-column: 1/2;
+  }
+  .ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--links {
+    grid-area: 1/2/3/3;
+  }
 }
 .ilo--card__type__data.ilo--card__size__narrow {
-  --max-width: 16.1307609861rem;
-  clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
+  --max-width: 32.154340836rem;
+  clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 48px, 100% 100%, 0 100%);
+}
+.ilo--card__type__data.ilo--card__size__wide {
+  --max-width: 41.6934619507rem;
 }
 .ilo--card__type__data.ilo--card__size__wide, .ilo--card__type__data.ilo--card__size__fluid {
-  --max-width: 32.154340836rem;
-  clip-path: polygon(0 0, calc(100% - 87px) 0, 100% 48px, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, calc(100% - 86px) 0, 100% 48px, 100% 100%, 0 100%);
 }
-.ilo--card__type__data .ilo--card--image--wrapper {
-  width: max(10.9860664523rem, 50%);
+.ilo--card__type__data .ilo--card--image {
+  width: 100%;
+  max-width: 200px;
+  margin: 0 0 1.6613076099rem;
 }
 .ilo--card__type__data--content-label {
   font-size: 14.93px;
   letter-spacing: normal;
   line-height: 20.3px;
-  margin-bottom: 0.6540478038rem;
+  margin-bottom: 0.4932760997rem;
   color: rgb(109, 109, 109);
 }
+.ilo--card__type__data .ilo--card--eyebrow {
+  margin: 0 0 0.857449089rem;
+}
 .ilo--card__type__data--content-copy {
   font-size: 23.32px;
   letter-spacing: -0.035em;
   line-height: 29.15px;
-  margin-bottom: 1.5763397642rem;
+  margin-bottom: 1.41556806rem;
   color: rgb(45, 45, 45);
   font-family: Overpass;
   font-weight: 500;
 }
 .ilo--card__type__data--content-files {
-  margin-bottom: 2.1436227224rem;
+  margin-bottom: 1.8756698821rem;
 }
-.ilo--card__type__data .ilo--link {
+.ilo--card__type__data [class*=ilo--link] {
   font-size: 18.66px;
   letter-spacing: -0.035em;
   line-height: 24.26px;
+  line-height: 1.8;
+  margin-inline-end: 0.6430868167rem;
+  margin-bottom: 0.6430868167rem;
 }
-.ilo--card__type__data--file {
+.ilo--card__type__data [class*=button] {
   margin: 0.2143622722rem 0.4287245445rem 0.2143622722rem 0;
 }
-.ilo--card__type__data--file:last-of-type {
+.ilo--card__type__data [class*=button]:last-of-type {
   margin-right: 0;
 }
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2111,7 +2153,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2186,7 +2228,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2251,7 +2293,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2356,7 +2398,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2437,7 +2479,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2447,7 +2489,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2457,7 +2499,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2467,7 +2509,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2593,7 +2635,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2621,7 +2663,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2709,7 +2751,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2719,7 +2761,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2729,7 +2771,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2782,7 +2824,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2857,7 +2899,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2963,7 +3005,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -2986,7 +3028,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3000,7 +3042,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3010,7 +3052,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3035,7 +3077,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3359,7 +3401,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3482,7 +3524,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3491,13 +3533,10 @@ body {
 * MAPS:
 */
 .hero {
-  --tooltip-width: 30px;
-  --tooltip-height: 27px;
   --corner-cut-height: 39px;
-  --image-max-height: 216px;
   display: grid;
   position: relative;
-  grid-template-rows: minmax(var(--image-max-height), 1fr) var(--tooltip-height) 39px auto;
+  grid-template-rows: minmax(216px, 1fr) 27px 39px auto;
   grid-template-columns: 1fr;
 }
 .hero--breadcrumbs {
@@ -3522,8 +3561,8 @@ body {
 }
 .hero--caption--wrapper {
   background: rgb(45, 45, 45);
-  height: var(--tooltip-height);
-  width: var(--tooltip-width);
+  height: 27px;
+  width: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -3533,17 +3572,12 @@ body {
   content: "";
   position: absolute;
   top: 0;
-  left: 100%;
   width: 0;
   height: 0;
-  border-top: var(--tooltip-height) solid transparent;
-  border-left: calc(var(--tooltip-height) - 4px) solid rgb(45, 45, 45);
-}
-.right-to-left .hero--caption--wrapper::after {
-  left: auto;
-  right: 100%;
-  border-left: none;
-  border-right: calc(var(--tooltip-height) - 4px) solid rgb(45, 45, 45);
+  border-top: 27px solid transparent;
+  left: 100%;
+  border-right: none;
+  border-left: calc(27px - 4px) solid rgb(45, 45, 45);
 }
 @media screen and (min-width: 1024px) {
   .hero {
@@ -3555,11 +3589,11 @@ body {
     --row-1-lg: var(--breadcrumbs-height);
     --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
     --row-3-lg: auto;
-    --row-4-lg: var(--tooltip-height);
+    --row-4-lg: 27px;
     --row-5-lg: 72px;
     --col-1-lg: 0;
     --col-2-lg: var(--card-width);
-    --col-3-lg: var(--tooltip-width);
+    --col-3-lg: 30px;
     --col-4-lg: 1fr;
     grid-template-rows: var(--row-1-lg) var(--row-2-lg) var(--row-3-lg) var(--row-4-lg) var(--row-5-lg);
     grid-template-columns: var(--col-1-lg) var(--col-2-lg) var(--col-3-lg) var(--col-4-lg);
@@ -3594,32 +3628,16 @@ body {
   .hero__card-justify__start {
     --col-1-lg: 0;
   }
-  .right-to-left .hero__card-justify__start {
-    --col-1-lg: 1fr;
-    --col-2-lg: var(--tooltip-width);
-    --col-3-lg: var(--card-width);
-    --col-4-lg: 0;
-  }
   .hero__card-justify__offset {
     --col-1-lg: var(--card-offset);
   }
-  .right-to-left .hero__card-justify__offset {
-    --col-1-lg: 1fr;
-    --col-2-lg: var(--tooltip-width);
-    --col-3-lg: var(--card-width);
-    --col-4-lg: var(--card-offset);
-  }
   .hero__card-justify__center {
     --col-1-lg: 1fr;
     --col-4-lg: 1fr;
   }
-  .right-to-left .hero__card-justify__center {
-    --col-2-lg: var(--tooltip-width);
-    --col-3-lg: var(--card-width);
-  }
   .hero__card-align__center {
-    --row-4-lg: calc(72px - var(--tooltip-height));
-    --row-5-lg: var(--tooltip-height);
+    --row-4-lg: calc(72px - 27px);
+    --row-5-lg: 27px;
   }
   .hero__card-align__bottom {
     --row-3-lg: 0;
@@ -3632,9 +3650,6 @@ body {
     display: flex;
     flex-flow: row nowrap;
   }
-  .right-to-left .hero--breadcrumbs {
-    flex-direction: row-reverse;
-  }
   .hero--breadcrumbs--wrapper {
     max-width: 500px;
   }
@@ -3650,9 +3665,6 @@ body {
   .hero--card {
     grid-area: 3/2/6/3;
   }
-  .right-to-left .hero--card {
-    grid-area: 3/3/6/4;
-  }
   .hero__card-align__center .hero--card {
     grid-area: 3/2/4/3;
   }
@@ -3663,32 +3675,174 @@ body {
     grid-area: 4/3/5/4;
     position: relative;
   }
-  .right-to-left .hero--caption {
-    grid-area: 4/2/5/3;
-  }
   .hero__card-align__center .hero--caption {
     grid-area: 5/1/6/3;
   }
   .hero__card-align__bottom .hero--caption {
     grid-area: 4/1/5/2;
   }
+  .hero__card-align__center .hero--caption--wrapper, .hero__card-align__bottom .hero--caption--wrapper {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  .hero__card-align__bottom.hero__card-justify__start .hero--caption {
+    grid-area: 1/1/3/3;
+  }
+  .hero__card-align__bottom.hero__card-justify__start .hero--caption .hero--caption--wrapper {
+    background: rgb(45, 45, 45);
+    height: 27px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    position: absolute;
+    left: 0;
+    right: initial;
+    bottom: 0;
+  }
+  .hero__card-align__bottom.hero__card-justify__start .hero--caption .hero--caption--wrapper::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: 27px solid transparent;
+    left: 100%;
+    border-right: none;
+    border-left: calc(27px - 4px) solid rgb(45, 45, 45);
+  }
   .hero--caption--wrapper {
     left: 2px;
   }
-  .right-to-left .hero--caption--wrapper {
+}
+.right-to-left .hero--caption--wrapper {
+  background: rgb(45, 45, 45);
+  height: 27px;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  position: absolute;
+  right: 0;
+}
+.right-to-left .hero--caption--wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 0;
+  border-top: 27px solid transparent;
+  left: auto;
+  right: 100%;
+  border-left: none;
+  border-right: calc(27px - 4px) solid rgb(45, 45, 45);
+}
+@media screen and (min-width: 1024px) {
+  .right-to-left .hero__card-justify__start {
+    --col-1-lg: 1fr;
+    --col-2-lg: 30px;
+    --col-3-lg: var(--card-width);
+    --col-4-lg: 0;
+  }
+  .right-to-left .hero__card-justify__offset {
+    --col-1-lg: 1fr;
+    --col-2-lg: 30px;
+    --col-3-lg: var(--card-width);
+    --col-4-lg: var(--card-offset);
+  }
+  .right-to-left .hero__card-justify__center {
+    --col-1-lg: 1fr;
+    --col-2-lg: 30px;
+    --col-3-lg: var(--card-width);
+    --col-4-lg: 1fr;
+  }
+  .right-to-left .hero__card-align__center .hero--card {
+    grid-area: 3/3/4/4;
+  }
+  .right-to-left .hero__card-align__center .hero--caption {
+    grid-area: 5/4/6/5;
+  }
+  .right-to-left .hero__card-align__center .hero--caption--wrapper {
+    right: 0;
+    left: initial;
+    position: absolute;
+  }
+  .right-to-left .hero__card-align__bottom .hero--caption {
+    grid-area: 4/4/5/5;
+  }
+  .right-to-left .hero__card-align__bottom .hero--caption--wrapper {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: initial;
+  }
+  .right-to-left .hero__card-align__bottom.hero__card-justify__start .hero--caption {
+    grid-area: 2/3/3/4;
+  }
+  .right-to-left .hero__card-align__bottom.hero__card-justify__start .hero--caption--wrapper {
+    background: rgb(45, 45, 45);
+    height: 27px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    position: absolute;
+    left: initial;
+    right: 0;
+  }
+  .right-to-left .hero__card-align__bottom.hero__card-justify__start .hero--caption--wrapper::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: 27px solid transparent;
     left: auto;
+    right: 100%;
+    border-left: none;
+    border-right: calc(27px - 4px) solid rgb(45, 45, 45);
+  }
+  .right-to-left .hero--card {
+    grid-area: 3/3/6/4;
+  }
+  .right-to-left .hero--breadcrumbs {
+    flex-direction: row-reverse;
+  }
+  .right-to-left .hero--caption {
+    grid-area: 4/2/5/3;
+  }
+  .right-to-left .hero--caption--wrapper {
     right: 2px;
+    left: initial;
+    background: rgb(45, 45, 45);
+    height: 27px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
   }
-  .hero__card-align__center .hero--caption--wrapper, .hero__card-align__bottom .hero--caption--wrapper {
+  .right-to-left .hero--caption--wrapper::after {
+    content: "";
     position: absolute;
-    left: 0;
-    bottom: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: 27px solid transparent;
+    left: auto;
+    right: 100%;
+    border-left: none;
+    border-right: calc(27px - 4px) solid rgb(45, 45, 45);
   }
 }
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3744,7 +3898,20 @@ body {
   }
 }
 .ilo--hero-card__cornercut {
-  clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
+}
+.right-to-left .ilo--hero-card__cornercut {
+  clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 40px, 100% 100%, 0 100%);
+  clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
+}
+@media screen and (min-width: 1024px) {
+  .ilo--hero-card__cornercut {
+    clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
+  }
+  .right-to-left .ilo--hero-card__cornercut {
+    clip-path: polygon(0 0, calc(100% - 116px) 0, 100% 64px, 100% 100%, 0 100%);
+    clip-path: polygon(116px 0, 100% 0, 100% 100%, 0 100%, 0 64px);
+  }
 }
 .ilo--hero-card--datecopy {
   font-size: 16px;
@@ -3809,7 +3976,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -3865,7 +4032,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4007,7 +4174,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4017,7 +4184,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4042,7 +4209,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4200,7 +4367,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4295,7 +4462,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4305,7 +4472,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4315,7 +4482,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4486,7 +4653,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4533,7 +4700,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4543,7 +4710,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4553,7 +4720,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -4650,7 +4817,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5540,7 +5707,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5550,7 +5717,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5560,7 +5727,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5752,7 +5919,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5892,7 +6059,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5902,7 +6069,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -5927,7 +6094,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6094,7 +6261,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6201,7 +6368,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6211,7 +6378,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6236,7 +6403,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6297,7 +6464,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6712,7 +6879,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6766,7 +6933,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -6924,7 +7091,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -7275,7 +7442,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -7461,7 +7628,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -7519,7 +7686,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -7693,7 +7860,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -7868,7 +8035,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -8778,7 +8945,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -8788,7 +8955,7 @@ body {
 */
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS:
@@ -8813,7 +8980,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 16 Aug 2023 08:41:51 GMT
+ * Generated on Fri, 18 Aug 2023 09:08:39 GMT
  */
 /**
 * TOKENS: