@ilo-org/styles 0.7.1 → 0.8.0

package/build/css/index.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:
@@ -169,7 +169,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:
@@ -288,7 +288,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:
@@ -313,7 +313,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:
@@ -567,7 +567,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:
@@ -577,7 +577,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:
@@ -602,7 +602,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:
@@ -892,7 +892,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:
@@ -1022,7 +1022,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:
@@ -1229,7 +1229,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:
@@ -1393,7 +1393,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:
@@ -1487,7 +1487,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:
@@ -1624,7 +1624,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:
@@ -1755,7 +1755,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:
@@ -1904,7 +1904,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:
@@ -1913,62 +1913,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:
@@ -2030,7 +2072,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:
@@ -2105,7 +2147,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:
@@ -2170,7 +2212,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:
@@ -2275,7 +2317,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:
@@ -2366,7 +2408,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:
@@ -2376,7 +2418,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:
@@ -2386,7 +2428,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:
@@ -2512,7 +2554,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:
@@ -2540,7 +2582,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:
@@ -2628,7 +2670,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:
@@ -2638,7 +2680,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:
@@ -2648,7 +2690,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:
@@ -2701,7 +2743,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:
@@ -2776,7 +2818,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:
@@ -2882,7 +2924,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:
@@ -2905,7 +2947,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:
@@ -2919,7 +2961,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:
@@ -2929,7 +2971,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:
@@ -2954,7 +2996,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:
@@ -3278,7 +3320,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:
@@ -3401,7 +3443,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:
@@ -3410,13 +3452,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 {
@@ -3441,8 +3480,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;
@@ -3452,17 +3491,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 {
@@ -3474,11 +3508,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);
@@ -3513,32 +3547,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;
@@ -3551,9 +3569,6 @@ body {
     display: flex;
     flex-flow: row nowrap;
   }
-  .right-to-left .hero--breadcrumbs {
-    flex-direction: row-reverse;
-  }
   .hero--breadcrumbs--wrapper {
     max-width: 500px;
   }
@@ -3569,9 +3584,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;
   }
@@ -3582,32 +3594,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:
@@ -3663,7 +3817,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;
@@ -3728,7 +3895,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:
@@ -3784,7 +3951,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:
@@ -3926,7 +4093,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:
@@ -3936,7 +4103,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:
@@ -3961,7 +4128,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:
@@ -4119,7 +4286,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:
@@ -4214,7 +4381,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:
@@ -4224,7 +4391,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:
@@ -4234,7 +4401,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:
@@ -4405,7 +4572,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:
@@ -4452,7 +4619,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:
@@ -4462,7 +4629,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:
@@ -4472,7 +4639,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:
@@ -4569,7 +4736,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:
@@ -5459,7 +5626,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:
@@ -5469,7 +5636,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:
@@ -5479,7 +5646,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:
@@ -5671,7 +5838,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:
@@ -5811,7 +5978,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:
@@ -5821,7 +5988,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:
@@ -5846,7 +6013,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:
@@ -6013,7 +6180,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:
@@ -6120,7 +6287,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:
@@ -6130,7 +6297,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:
@@ -6155,7 +6322,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:
@@ -6216,7 +6383,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:
@@ -6631,7 +6798,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:
@@ -6685,7 +6852,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:
@@ -6843,7 +7010,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:
@@ -7194,7 +7361,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:
@@ -7380,7 +7547,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:
@@ -7438,7 +7605,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:
@@ -7612,7 +7779,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:
@@ -7787,7 +7954,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:
@@ -8697,7 +8864,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:
@@ -8707,7 +8874,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:
@@ -8732,7 +8899,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: