@ilo-org/styles 0.6.0 → 0.7.0

package/scss/components/_card.scss

@@ -6,51 +6,89 @@
 .ilo--card {
   $self: &;
   $transition-timing: 150ms;
-  margin: 0;
-  max-width: px-to-rem(920px);
+
+  box-sizing: border-box;
+  position: relative;
+
+  // Max width is set in the invididual card types unless fluid
+  max-width: var(--max-width);
+  flex: 1 1 var(--max-width);
+
+  &__size__fluid {
+    --max-width: 100% !important;
+  }
 
   .right-to-left & {
     text-align: right;
   }
 
-  &--action:hover:not(#{$self}--data):not(#{$self}--stat),
-  &--action:focus:not(#{$self}--data):not(#{$self}--stat),
-  &--action:focus-within:not(#{$self}--data):not(#{$self}--stat) {
+  &__action:hover,
+  &__action:focus,
+  &__action:focus-within {
     background: $brand-ilo-white;
-    color: $brand-ilo-blue;
     outline: none;
     text-decoration: none;
 
-    &#{$self}--dark:not(#{$self}--detail):not(#{$self}--data):not(
-        #{$self}--multilink
-      ):not(#{$self}--factlist) {
+    &#{$self}__dark {
       background: $brand-ilo-white;
-
-      &#{$self}--cornercut {
-        &::after {
-          @include dataurlicon("triangledecoration", $brand-ilo-white);
-        }
-      }
     }
 
-    #{$self}--eyebrow {
+    #{$self}--eyebrow,
+    #{$self}--title,
+    #{$self}--intro,
+    #{$self}--date,
+    #{$self}--date-extra {
       color: $brand-ilo-blue;
     }
+  }
 
-    #{$self}--title {
-      color: $brand-ilo-blue;
+  &__theme {
+    &__light {
+      background: $brand-ilo-white;
     }
 
-    #{$self}--intro {
-      color: $brand-ilo-blue;
+    &__dark {
+      background: $brand-ilo-dark-blue;
+      transition: background $transition-timing ease-out;
+
+      #{$self}--eyebrow,
+      #{$self}--title,
+      #{$self}--intro,
+      #{$self}--date,
+      #{$self}--eventdate {
+        color: $brand-ilo-grey-light;
+        transition: color $transition-timing ease-out;
+      }
     }
+  }
 
-    #{$self}--date {
-      color: $brand-ilo-blue;
+  &__isvideo {
+    #{$self}--image--wrapper {
+      position: relative;
+
+      &::before {
+        @include dataurlicon("play", $brand-ilo-grey-light);
+        background-color: $brand-ilo-grey-charcoal;
+        background-position: center;
+        background-size: 18px 20px;
+        background-repeat: no-repeat;
+        content: "";
+        display: block;
+        height: 40px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 40px;
+        z-index: 1;
+      }
     }
+  }
 
-    #{$self}--eventdate {
-      color: $brand-ilo-blue;
+  &--wrapper {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      @include card-drop-shadow;
     }
   }
 
@@ -73,157 +111,32 @@
       @include globaltransition(
         "color, background-color, border-color, opacity"
       );
-    }
-
-    &--text {
-      @include isVisuallyHidden();
-    }
-  }
-
-  &--light {
-    background: $brand-ilo-white;
-  }
-
-  &--dark:not(#{$self}--detail):not(#{$self}--data):not(
-      #{$self}--multilink
-    ):not(:hover):not(:focus):not(:focus-within) {
-    background: $brand-ilo-dark-blue;
-    outline: none;
-    transition: background $transition-timing ease-out;
-
-    #{$self}--eyebrow {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--title {
-      color: $brand-ilo-white;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--intro {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--date {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--eventdate {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-  }
-
-  &--dark:not(#{$self}--action),
-  &--dark:not(#{$self}--action):hover,
-  &--dark:not(#{$self}--action):focus,
-  &--dark:not(#{$self}--action):focus-within {
-    background: $brand-ilo-dark-blue;
-    outline: none;
-    transition: background $transition-timing ease-out;
-
-    #{$self}--eyebrow {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--title {
-      color: $brand-ilo-white;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--intro {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--date {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-
-    #{$self}--eventdate {
-      color: $brand-ilo-grey-light;
-      transition: color $transition-timing ease-out;
-    }
-  }
-
-  &--cornercut:not(#{$self}--multilink):not(#{$self}--detail):not(
-      #{$self}--feature
-    ):not(#{$self}--graphic):not(#{$self}--stat):not(#{$self}--data) {
-    @include cornercut($brand-ilo-white, 40px, 73px);
-    margin-top: px-to-rem(40px);
-    padding-top: 0;
-    position: relative;
-
-    &#{$self}--dark {
-      &::after {
-        @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
-      }
-    }
-
-    @include breakpoint("medium") {
-      @include cornercut($brand-ilo-white, 48px, 87px);
-      margin-top: px-to-rem(48px);
 
-      &#{$self}--dark {
-        &::after {
-          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+      + #{$self}--wrap {
+        #{$self}--eyebrow {
+          color: $brand-ilo-blue;
         }
-      }
-    }
-
-    @include breakpoint("large") {
-      @include cornercut($brand-ilo-white, 64px, 116px);
-      margin-top: px-to-rem(64px);
 
-      &#{$self}--dark {
-        &::after {
-          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+        #{$self}--title {
+          color: $brand-ilo-blue;
         }
-      }
-    }
-
-    &::before {
-      left: 0;
-      top: px-to-rem(-40px);
-      transition: background-image $transition-timing ease-out;
 
-      .right-to-left & {
-        left: auto;
-        right: 0;
-      }
+        #{$self}--intro {
+          color: $brand-ilo-blue;
+        }
 
-      @include breakpoint("medium") {
-        top: px-to-rem(-47.7px);
-      }
+        #{$self}--date {
+          color: $brand-ilo-blue;
+        }
 
-      @include breakpoint("large") {
-        top: px-to-rem(-63.7px);
+        #{$self}--eventdate {
+          color: $brand-ilo-blue;
+        }
       }
     }
 
-    &::after {
-      right: 0;
-      top: px-to-rem(-40px);
-      transition: background-image $transition-timing ease-out;
-
-      .right-to-left & {
-        left: 0;
-        right: auto;
-        transform: rotateY(180deg);
-      }
-
-      @include breakpoint("medium") {
-        top: px-to-rem(-47.7px);
-      }
-
-      @include breakpoint("large") {
-        top: px-to-rem(-63.7px);
-      }
+    &--text {
+      @include isVisuallyHidden();
     }
   }
 
@@ -304,7 +217,7 @@
     @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
   }
 
-  &--image {
+  &--picture {
     max-width: 100%;
     width: 100%;
   }
@@ -313,1215 +226,4 @@
     position: relative;
     z-index: 2;
   }
-
-  &--isvideo {
-    #{$self}--image--wrapper {
-      position: relative;
-
-      &::before {
-        @include dataurlicon("play", $brand-ilo-grey-light);
-        background-color: $brand-ilo-grey-charcoal;
-        background-position: center;
-        background-size: 18px 20px;
-        background-repeat: no-repeat;
-        content: "";
-        display: block;
-        height: 40px;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 40px;
-        z-index: 1;
-      }
-    }
-  }
-
-  // CARD VARIANTS
-  &--multilink {
-    padding: px-to-rem(24px);
-
-    #{$self}--image--wrapper {
-      display: none;
-    }
-
-    #{$self}--content {
-      #{$self}--image--wrapper {
-        display: block;
-      }
-    }
-
-    @include breakpoint("medium") {
-      padding: px-to-rem(40px);
-    }
-
-    @include breakpoint("large") {
-      padding: px-to-rem(56px) px-to-rem(48px);
-    }
-
-    #{$self}--title {
-      @include font-styles("headline-5");
-      @include textmargin("margin-bottom", 24px, "headline-5", "display", 0, 0);
-      color: $brand-ilo-grey-charcoal;
-
-      @include breakpoint("medium") {
-        @include font-styles("headline-4");
-        @include textmargin(
-          "margin-bottom",
-          24px,
-          "headline-4",
-          "display",
-          0,
-          0
-        );
-      }
-    }
-
-    #{$self}--intro {
-      @include font-styles("body-small");
-      @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
-      color: $brand-ilo-grey-charcoal;
-
-      @include breakpoint("medium") {
-        @include font-styles("base");
-        @include textmargin("margin-bottom", 40px, "base", "copy", 0, 0);
-      }
-    }
-
-    &#{$self}--dark {
-      background: $brand-ilo-white;
-
-      #{$self}--title {
-        color: $brand-ilo-grey-charcoal;
-      }
-
-      #{$self}--intro {
-        color: $brand-ilo-grey-charcoal;
-      }
-    }
-
-    &#{$self}--wide {
-      padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-
-      @include breakpoint("medium") {
-        padding: px-to-rem(56px) px-to-rem(48px);
-
-        &#{$self}--right {
-          #{$self}--wrap {
-            flex-direction: row-reverse;
-
-            .right-to-left & {
-              flex-direction: row;
-            }
-          }
-        }
-
-        #{$self}--wrap {
-          display: flex;
-          column-gap: px-to-rem(32px);
-
-          .right-to-left & {
-            flex-direction: row-reverse;
-          }
-        }
-
-        #{$self}--image--wrapper {
-          display: block;
-          width: 50%;
-        }
-
-        #{$self}--content {
-          width: 50%;
-
-          #{$self}--image--wrapper {
-            display: none;
-          }
-        }
-      }
-    }
-
-    &#{$self}--standard {
-      padding: px-to-rem(48px) px-to-rem(40px);
-
-      @include breakpoint("medium") {
-        padding: px-to-rem(48px) px-to-rem(40px);
-      }
-
-      @include breakpoint("large") {
-        padding: px-to-rem(48px) px-to-rem(40px);
-      }
-    }
-
-    &#{$self}--narrow {
-      padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-
-      @include breakpoint("medium") {
-        padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-      }
-
-      @include breakpoint("large") {
-        padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-      }
-
-      #{$self}--image--wrapper {
-        display: none;
-      }
-
-      #{$self}--content {
-        #{$self}--image--wrapper {
-          display: block;
-          margin-bottom: px-to-rem(24px);
-        }
-      }
-
-      #{$self}--title {
-        @include breakpoint("medium") {
-          @include font-styles("headline-5");
-          @include textmargin(
-            "margin-bottom",
-            24px,
-            "headline-5",
-            "display",
-            0,
-            0
-          );
-        }
-      }
-
-      #{$self}--intro {
-        @include breakpoint("medium") {
-          @include font-styles("body-small");
-          @include textmargin(
-            "margin-bottom",
-            40px,
-            "body-small",
-            "copy",
-            0,
-            0
-          );
-        }
-      }
-    }
-
-    .ilo--link-list {
-      margin-top: px-to-rem(35px);
-    }
-  }
-
-  &--detail {
-    border-bottom: px-to-rem(3px) solid $brand-ilo-grey-light;
-    padding: px-to-rem(24px) 0;
-    position: relative;
-
-    @include breakpoint("large") {
-      padding: px-to-rem(32px) 0;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      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));
-
-      picture::before {
-        opacity: 0.4;
-        z-index: 2;
-      }
-
-      #{$self}--event-date {
-        &::before {
-          @include dataurlicon("equilateraltriangle", $brand-ilo-blue);
-        }
-      }
-    }
-
-    picture {
-      display: flex;
-      position: relative;
-
-      &::before {
-        background-color: $brand-ilo-blue;
-        content: "";
-        display: block;
-        height: 100%;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: -1;
-        @include globaltransition("opacity");
-      }
-    }
-
-    #{$self}--wrap {
-      display: flex;
-
-      .right-to-left & {
-        flex-direction: row-reverse;
-      }
-    }
-
-    #{$self}--image {
-      object-fit: contain;
-      width: px-to-rem(77px);
-
-      @include breakpoint("large") {
-        width: px-to-rem(200px);
-      }
-
-      &--wrapper {
-        max-width: px-to-rem(77px);
-        width: 100%;
-
-        @include breakpoint("large") {
-          max-width: px-to-rem(200px);
-        }
-      }
-    }
-
-    #{$self}--content {
-      padding: 0 px-to-rem(24px);
-    }
-
-    #{$self}--title {
-      @include font-styles("headline-6");
-
-      @include breakpoint("large") {
-        @include font-styles("headline-5");
-      }
-    }
-
-    #{$self}--event-date {
-      @include font-styles("body-small");
-      margin-bottom: 0;
-      padding-left: px-to-rem(24px);
-      position: relative;
-
-      &::before {
-        background-repeat: no-repeat;
-        content: "";
-        display: inline-block;
-        height: px-to-rem(14px);
-        left: 0;
-        position: absolute;
-        top: 50%;
-        transform: rotate(-90deg) translateX(50%);
-        width: px-to-rem(12px);
-        @include dataurlicon("equilateraltriangle", $brand-ilo-grey-charcoal);
-      }
-    }
-
-    #{$self}--date {
-      @include font-styles("body-small");
-    }
-  }
-
-  &--graphic {
-    @include cornercut($brand-ilo-white, 40px, 73px);
-    border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
-    margin-top: px-to-rem(40px);
-    padding: 0 px-to-rem(24px) px-to-rem(40px);
-    position: relative;
-
-    &#{$self}--dark {
-      &::after {
-        @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
-      }
-
-      &:hover,
-      &:focus,
-      &:focus-within {
-        &::after {
-          @include dataurlicon("triangledecoration", $brand-ilo-white);
-        }
-      }
-    }
-
-    &::before {
-      left: 0;
-      top: -39.7px;
-
-      .right-to-left & {
-        left: auto;
-        right: 0;
-      }
-    }
-
-    &::after {
-      right: 0;
-      top: -39.7px;
-      transition: background-image $transition-timing ease-out;
-
-      .right-to-left & {
-        left: 0;
-        right: auto;
-        transform: rotateY(180deg);
-      }
-    }
-
-    .ilo--profile--contents--light * {
-      color: $color-base-neutrals-dark;
-    }
-
-    .ilo--profile--contents--dark * {
-      color: $color-base-neutrals-white;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      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));
-
-      .ilo--profile--contents * {
-        color: $color-base-blue-medium;
-      }
-    }
-
-    @include breakpoint("medium") {
-      @include cornercut($brand-ilo-white, 40px, 73px);
-      padding: 0 px-to-rem(32px) px-to-rem(40px);
-
-      &#{$self}--dark {
-        &::after {
-          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
-        }
-
-        &:hover,
-        &:focus,
-        &:focus-within {
-          &::after {
-            @include dataurlicon("triangledecoration", $brand-ilo-white);
-          }
-        }
-      }
-
-      &::before {
-        left: 0;
-        top: -39.7px;
-
-        .right-to-left & {
-          left: auto;
-          right: 0;
-        }
-      }
-
-      &::after {
-        right: 0;
-        top: -39.7px;
-
-        .right-to-left & {
-          left: 0;
-          right: auto;
-          transform: rotateY(180deg);
-        }
-      }
-    }
-
-    @include breakpoint("large") {
-      @include cornercut($brand-ilo-white, 40px, 73px);
-
-      &#{$self}--dark {
-        &::after {
-          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
-        }
-
-        &:hover,
-        &:focus,
-        &:focus-within {
-          &::after {
-            @include dataurlicon("triangledecoration", $brand-ilo-white);
-          }
-        }
-      }
-
-      &::before {
-        left: 0;
-        top: -39.7px;
-
-        .right-to-left & {
-          left: auto;
-          right: 0;
-        }
-      }
-
-      &::after {
-        right: 0;
-        top: -39.7px;
-
-        .right-to-left & {
-          left: 0;
-          right: auto;
-          transform: rotateY(180deg);
-        }
-      }
-    }
-
-    &#{$self}--wide {
-      padding: 0 px-to-rem(32px) px-to-rem(40px);
-
-      @include breakpoint("medium") {
-        padding: 0 px-to-rem(32px) px-to-rem(40px);
-      }
-    }
-
-    &#{$self}--standard {
-      padding: 0 px-to-rem(32px) px-to-rem(40px);
-
-      @include breakpoint("medium") {
-        padding: 0 px-to-rem(32px) px-to-rem(40px);
-      }
-    }
-
-    &#{$self}--narrow {
-      padding: 0 px-to-rem(24px) px-to-rem(40px);
-
-      @include breakpoint("medium") {
-        padding: 0 px-to-rem(24px) px-to-rem(40px);
-      }
-
-      #{$self}--title {
-        @include font-styles("headline-6");
-        @include textmargin(
-          "margin-bottom",
-          40px,
-          "headline-6",
-          "display",
-          "base",
-          "copy"
-        );
-      }
-    }
-
-    &#{$self}--dark {
-      border-bottom: px-to-rem(3px) solid $color-base-red-medium;
-    }
-
-    #{$self}--eyebrow {
-      @include textmargin(
-        "margin-bottom",
-        24px,
-        "base",
-        "copy",
-        "headline-5",
-        "display"
-      );
-    }
-
-    #{$self}--title {
-      @include font-styles("headline-6");
-      @include textmargin(
-        "margin-bottom",
-        40px,
-        "headline-6",
-        "display",
-        "base",
-        "copy"
-      );
-
-      @include breakpoint("medium") {
-        @include font-styles("headline-5");
-        @include textmargin(
-          "margin-bottom",
-          40px,
-          "headline-5",
-          "display",
-          "base",
-          "copy"
-        );
-      }
-    }
-
-    #{$self}--date {
-      display: block;
-      @include textmargin("margin-bottom", 32px, "base", "copy", 0, 0);
-    }
-
-    .ilo--card--content {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-
-      > * {
-        justify-self: flex-start;
-      }
-
-      > *:last-child {
-        justify-self: flex-end;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &--graphicpromo {
-    max-width: px-to-rem(920px);
-    padding: px-to-rem(40px) px-to-rem(24px);
-    width: 100%;
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      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));
-    }
-
-    @include breakpoint("medium") {
-      padding: px-to-rem(48px);
-    }
-
-    @include breakpoint("large") {
-      padding: px-to-rem(64px) px-to-rem(72px);
-    }
-
-    &#{$self}--wide {
-      padding: px-to-rem(64px) px-to-rem(72px);
-
-      @include breakpoint("medium") {
-        padding: px-to-rem(64px) px-to-rem(72px);
-      }
-
-      @include breakpoint("large") {
-        padding: px-to-rem(64px) px-to-rem(72px);
-      }
-    }
-
-    &#{$self}--standard {
-      padding: px-to-rem(48px);
-
-      @include breakpoint("medium") {
-        padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px) px-to-rem(48px);
-      }
-
-      @include breakpoint("large") {
-        padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px) px-to-rem(48px);
-      }
-    }
-
-    &#{$self}--narrow {
-      padding: px-to-rem(40px) px-to-rem(24px);
-
-      @include breakpoint("medium") {
-        padding: px-to-rem(40px) px-to-rem(24px);
-      }
-
-      @include breakpoint("large") {
-        padding: px-to-rem(40px) px-to-rem(24px);
-      }
-
-      #{$self}--title {
-        @include font-styles("headline-4");
-        @include textmargin(
-          "margin-bottom",
-          24px,
-          "headline-4",
-          "display",
-          "body-small",
-          "copy"
-        );
-
-        @include breakpoint("medium") {
-          @include font-styles("headline-3");
-          @include textmargin(
-            "margin-bottom",
-            24px,
-            "headline-3",
-            "display",
-            "body-small",
-            "copy"
-          );
-        }
-      }
-
-      #{$self}--intro {
-        @include font-styles("body-small");
-        @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
-      }
-    }
-
-    &#{$self}--light:not(:hover) #{$self}--title {
-      color: $brand-ilo-grey-charcoal;
-      @include globaltransition("color");
-    }
-
-    #{$self}--title {
-      @include font-styles("headline-4");
-      @include textmargin(
-        "margin-bottom",
-        24px,
-        "headline-4",
-        "display",
-        "body-small",
-        "copy"
-      );
-
-      @include breakpoint("medium") {
-        @include font-styles("headline-3");
-        @include textmargin(
-          "margin-bottom",
-          32px,
-          "headline-3",
-          "display",
-          "base",
-          "copy"
-        );
-      }
-    }
-
-    #{$self}--intro {
-      @include font-styles("body-small");
-      @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
-
-      @include breakpoint("medium") {
-        @include font-styles("base");
-        @include textmargin("margin-bottom", 40px, "base", "copy", 0, 0);
-      }
-    }
-  }
-
-  &--factlist {
-    border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
-    max-width: px-to-rem(856px);
-    padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);
-    pointer-events: none;
-
-    &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-        .ilo--card--detail
-      ):not(.ilo--card--feature) {
-      &::before {
-        height: 40px;
-        top: px-to-rem(-39.7px);
-        width: calc(100% - 73px);
-      }
-
-      &::after {
-        height: 40px;
-        top: px-to-rem(-39.7px);
-        width: 73.3px;
-      }
-    }
-
-    &#{$self}--dark {
-      background: $brand-ilo-dark-blue;
-    }
-
-    @include breakpoint("large") {
-      padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-          .ilo--card--detail
-        ):not(.ilo--card--feature) {
-        &::before {
-          height: 48px;
-          top: px-to-rem(-47.7px);
-          width: calc(100% - 87px);
-        }
-
-        &::after {
-          height: 48px;
-          top: px-to-rem(-47.7px);
-          width: 87.3px;
-        }
-      }
-    }
-
-    &#{$self}--wide {
-      padding: 0 px-to-rem(40px) px-to-rem(52px) px-to-rem(40px);
-
-      @include breakpoint("medium") {
-        padding: 0 px-to-rem(40px) px-to-rem(60px) px-to-rem(40px);
-      }
-    }
-
-    &#{$self}--standard {
-      padding: 0 px-to-rem(40px) px-to-rem(52px) px-to-rem(40px);
-
-      @include breakpoint("medium") {
-        padding: 0 px-to-rem(40px) px-to-rem(60px) px-to-rem(40px);
-      }
-    }
-
-    &#{$self}--narrow {
-      padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);
-
-      @include breakpoint("medium") {
-        padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);
-      }
-    }
-
-    &#{$self}--dark {
-      border-bottom: px-to-rem(3px) solid $color-base-red-medium;
-
-      #{$self}--title {
-        color: $brand-ilo-white;
-        @include globaltransition("color");
-      }
-
-      .ilo--list__item {
-        color: $brand-ilo-white;
-
-        &:last-of-type {
-          margin-bottom: 0;
-        }
-      }
-
-      &:hover,
-      &:focus,
-      &:focus-within {
-        #{$self}--title {
-          color: $brand-ilo-white;
-          @include globaltransition("color");
-        }
-
-        .ilo--list__item {
-          color: $brand-ilo-white;
-        }
-      }
-    }
-
-    #{$self}--title {
-      color: $brand-ilo-grey-charcoal;
-      @include font-styles("headline-5");
-      @include textmargin(
-        "margin-bottom",
-        32px,
-        "headline-5",
-        "display",
-        "body-small",
-        "copy"
-      );
-
-      @include breakpoint("large") {
-        @include font-styles("headline-4");
-        @include textmargin(
-          "margin-bottom",
-          40px,
-          "headline-4",
-          "display",
-          "base",
-          "copy"
-        );
-      }
-    }
-  }
-
-  &--stat {
-    border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
-    margin-top: px-to-rem(40px);
-    padding: 0 px-to-rem(24px) px-to-rem(40px) px-to-rem(22px);
-    position: relative;
-    width: 100%;
-
-    &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-        .ilo--card--detail
-      ):not(.ilo--card--feature) {
-      &::before {
-        left: 0;
-        top: px-to-rem(-39.7px);
-
-        .right-to-left & {
-          left: auto;
-          right: 0;
-        }
-      }
-
-      &::after {
-        right: 0;
-        top: px-to-rem(-39.7px);
-
-        .right-to-left & {
-          left: 0;
-          right: auto;
-          transform: rotateY(180deg);
-        }
-      }
-    }
-
-    &#{$self}--blue {
-      background: $brand-ilo-light-blue;
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-          .ilo--card--detail
-        ):not(.ilo--card--feature) {
-        @include cornercut($brand-ilo-light-blue, 40px, 73px);
-      }
-    }
-
-    &#{$self}--yellow {
-      background: $brand-ilo-yellow;
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-          .ilo--card--detail
-        ):not(.ilo--card--feature) {
-        @include cornercut($brand-ilo-yellow, 40px, 73px);
-      }
-    }
-
-    &#{$self}--green {
-      background: $brand-ilo-green;
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-          .ilo--card--detail
-        ):not(.ilo--card--feature) {
-        @include cornercut($brand-ilo-green, 40px, 73px);
-      }
-    }
-
-    &#{$self}--turquoise {
-      background: $brand-ilo-turquoise;
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(
-          .ilo--card--detail
-        ):not(.ilo--card--feature) {
-        @include cornercut($brand-ilo-turquoise, 40px, 73px);
-      }
-    }
-
-    #{$self}--content {
-      display: flex;
-      flex-wrap: wrap;
-      height: 100%;
-
-      .right-to-left & {
-        flex-direction: row-reverse;
-      }
-    }
-
-    #{$self}--title {
-      color: $brand-ilo-dark-blue;
-      @include font-styles("headline-3");
-      @include textmargin("margin-bottom", 24px, "headline-3", "display", 0, 0);
-      width: 100%;
-    }
-
-    #{$self}--intro {
-      color: $brand-ilo-dark-blue;
-      font-family: $fonts-display;
-      @include font-styles("base");
-      @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
-      width: 100%;
-    }
-
-    .ilo--link {
-      @include font-styles("image-credit");
-      align-self: flex-end;
-    }
-  }
-
-  &--data {
-    @include cornercut($brand-ilo-light-blue, 40px, 73px);
-    background: $brand-ilo-light-blue;
-    border-bottom: px-to-rem(3px) solid #82afdc;
-    margin-top: px-to-rem(40px);
-    max-width: px-to-rem(600px);
-    padding: 0 px-to-rem(24px) px-to-rem(56px);
-    position: relative;
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      background: $brand-ilo-light-blue;
-    }
-
-    &::before {
-      left: 0;
-      top: px-to-rem(-39.7px);
-
-      .right-to-left & {
-        left: auto;
-        right: 0;
-      }
-    }
-
-    &::after {
-      right: 0;
-      top: px-to-rem(-39.7px);
-
-      .right-to-left & {
-        left: 0;
-        right: auto;
-        transform: rotateY(180deg);
-      }
-    }
-
-    @include breakpoint("medium") {
-      @include cornercut($brand-ilo-light-blue, 48px, 84px);
-
-      &::before {
-        top: px-to-rem(-47.7px);
-      }
-
-      &::after {
-        top: px-to-rem(-47.7px);
-      }
-    }
-
-    #{$self}--image--wrapper {
-      display: none;
-      width: max(px-to-rem(205px), 50%);
-    }
-
-    #{$self}--content {
-      #{$self}--image--wrapper {
-        display: block;
-      }
-    }
-
-    &--content-label {
-      @include font-styles("body-xs");
-      @include textmargin(
-        "margin-bottom",
-        16px,
-        "body-xs",
-        "copy",
-        "headline-5",
-        "display"
-      );
-      color: $brand-ilo-grey-accessible;
-    }
-
-    &--content-copy {
-      @include font-styles("headline-5");
-      @include textmargin(
-        "margin-bottom",
-        40px,
-        "headline-5",
-        "display",
-        "body-xs",
-        "copy"
-      );
-      color: $brand-ilo-grey-charcoal;
-      font-family: $fonts-display;
-      font-weight: 500;
-    }
-
-    &--content-files {
-      margin-bottom: px-to-rem(40px);
-    }
-
-    .ilo--link {
-      @include font-styles("headline-6");
-    }
-
-    &--file {
-      margin: px-to-rem(4px) px-to-rem(8px) px-to-rem(4px) 0;
-
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-
-  &--feature {
-    border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
-    display: flex;
-    margin-top: 0;
-    position: relative;
-
-    &::before {
-      display: none;
-    }
-
-    &#{$self}--dark {
-      border-bottom: px-to-rem(3px) solid $color-base-red-medium;
-
-      .ilo--link-list {
-        border-top: 2px solid rgba($brand-ilo-grey-light, 0.25);
-
-        &--link {
-          color: $brand-ilo-white;
-          @include dataurlicon("arrowright", $brand-ilo-white);
-        }
-      }
-
-      &:hover,
-      &:focus,
-      &:focus-within {
-        .ilo--link-list {
-          &--link {
-            color: $brand-ilo-blue;
-            @include dataurlicon("arrowright", $brand-ilo-blue);
-          }
-        }
-      }
-    }
-
-    picture::before {
-      @include globaltransition("opacity");
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-within {
-      background-color: $brand-ilo-white;
-      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));
-      border-bottom: px-to-rem(3px) solid $brand-ilo-blue;
-
-      picture::before {
-        opacity: 0.4;
-        z-index: 1;
-        @include globaltransition("opacity");
-      }
-
-      #{$self}--image {
-        filter: saturate(0);
-      }
-    }
-
-    .ilo--link-list {
-      border-top: px-to-rem(2px) solid $brand-ilo-grey-light;
-      margin-left: px-to-rem(-24px);
-      margin-right: px-to-rem(-24px);
-      margin-top: px-to-rem(34px);
-      position: relative;
-      z-index: 2;
-
-      &--link,
-      &--link:hover {
-        border-bottom: none;
-        padding-left: px-to-rem(24px);
-        padding-right: px-to-rem(24px);
-      }
-    }
-
-    &#{$self}--narrow,
-    &#{$self}--standard {
-      #{$self}--wrap {
-        display: flex;
-        flex-wrap: wrap;
-        width: 100%;
-      }
-
-      #{$self}--content {
-        width: 100%;
-      }
-
-      #{$self}--image--wrapper {
-        width: 100%;
-      }
-    }
-
-    &#{$self}--wide {
-      @include breakpoint("medium") {
-        #{$self}--wrap {
-          flex-direction: row;
-
-          .right-to-left & {
-            flex-direction: row-reverse;
-          }
-        }
-
-        #{$self}--content {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          position: relative;
-          width: 50%;
-        }
-
-        #{$self}--image--wrapper {
-          width: 50%;
-        }
-
-        #{$self}--image {
-          object-fit: cover;
-        }
-
-        #{$self}--date {
-          align-self: flex-end;
-          width: 100%;
-        }
-
-        #{$self}--eyebrow {
-          width: 100%;
-        }
-
-        #{$self}--title {
-          width: 100%;
-        }
-
-        .ilo--link-list {
-          width: calc(100% + 48px);
-        }
-      }
-    }
-
-    #{$self}--wrap {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    picture {
-      display: flex;
-      height: 100%;
-      position: relative;
-
-      &::before {
-        background-color: $brand-ilo-blue;
-        content: "";
-        display: block;
-        height: 100%;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        transition: opacity 150ms ease-in-out;
-        width: 100%;
-        z-index: -1;
-      }
-    }
-
-    #{$self}--content {
-      display: flex;
-      flex: 1 1 auto;
-      flex-direction: column;
-      padding: px-to-rem(24px) px-to-rem(24px) px-to-rem(40px);
-    }
-
-    &#{$self}--linklist {
-      #{$self}--content {
-        padding-bottom: 0;
-      }
-    }
-
-    #{$self}--title {
-      @include font-styles("headline-5");
-      @include textmargin(
-        "margin-bottom",
-        40px,
-        "headline-5",
-        "display",
-        "body-eyebrow",
-        "copy"
-      );
-      font-family: $fonts-display;
-      font-weight: 700;
-    }
-
-    #{$self}--eyebrow {
-      @include font-styles("body-eyebrow");
-      @include textmargin(
-        "margin-bottom",
-        10px,
-        "body-eyebrow",
-        "copy",
-        "headline-5",
-        "display"
-      );
-    }
-
-    #{$self}--date {
-      margin-bottom: 0;
-      margin-top: auto;
-    }
-  }
 }