@mixin blocks-background-mapping {
  // block title
  .bg-brand {
    &--dark-blue,
    &--blue {
      .block__title {
        color: $color-brand--four;
      }
    }

    // sub title
    &--blue,
    &--dark-blue {
      .block__header p {
        color: $color-alpha--four-50;
      }
    }

    &--off-white {
      .block__header p {
        color: $color--two-80;
      }
    }

    &--yellow {
      .wrapper p {
        color: $color-brand--two;
      }
      .block__header p {
        color: $color-alpha--two-70;
      }
    }
  }
}
