@mixin cards-general-background-mapping {
  .cards__item {
    background: $color-brand--five;
  }

  .cards__title a {
    color: $color-brand--three;
  }

  .cards__info-button:hover > .icon {
    color: $color-brand--two;
  }

  .cards__item:not(.cards__item--more):not(.cards__item--disabled):hover {
    border-color: $color-brand--three;
  }

  .cards__item--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {
    &,
    &:hover,
    &:focus {
      background-color: $color--one-light;
      border-color: $color-brand--one;
    }
  }

  .bg-brand--light-grey {
    .cards__item {
      background: $color-brand--white;
    }
  }

  //backside

  .cards__backside-description {
    color: $color-brand--white;
  }

  a.cards__backside-footer--job-link {
    color: $color-brand--white;
  }

  .cards__backside-footer--close-backside {
    color: $color-alpha--four-50;

    &:hover {
      color: $color-brand--white;
    }
  }

  .cards__item.cards__item--backside-active {
    .cards__backside-card,
    & {
      background: $color-brand--three;
    }

    .cards__backside-description::before {
      background: linear-gradient(
        to bottom,
        rgba($color-brand--three, 0),
        80%,
        rgba($color-brand--three, 100)
      );
    }
  }

  // icons

  .cards__meta .icon,
  .cards__info-button .icon {
    @include color-dark-shade-alternative;
  }

  .icon__toggler {
    .icon + .icon {
      color: $color-brand--one;
    }

    &:hover svg {
      fill: $color-brand--one
    }
  }

  //more card
  .cards__item.cards__item--more {
    background: $color-brand--three;
  }

  .cards__item--more .button {
    color: $color-brand--white;
  }

  //keyframes animation
  @keyframes blueToOffWhite {
    from {
      background-color: $color-brand--three;
    }
    to {
      background-color: $color-brand--five;
    }
  }

  @keyframes blueToWhite {
    from {
      background-color: $color-brand--three;
    }
    to {
      background-color: $color-brand--white;
    }
  }
}