@mixin content-block-background-mapping {
  &.content-block__bubble--primary,
  .bg-variant-brand-primary & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: returnColorCSSVar('brand-secondary');
        background: none;
      }
    }
  }

  &.content-block__bubble--secondary,
  .bg-variant-brand-secondary & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: returnColorCSSVar('brand-primary');
      }
    }
  }

  &.content-block__bubble--quaternary,
  .bg-variant-brand-quaternary & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: white;
      }
      //color: #659dab;
    }
  }

  &.content-block__bubble--quinary,
  .bg-variant-brand-quinary & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: returnColorCSSVar('brand-secondary');
      }
      .content-block__bubble-bottom.bubble3 {
        color: white;
      }
    }
  }

  &.content-block__bubble--senary,
  .bg-variant-brand-senary & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: returnColorCSSVar('brand-senary');
      }
    }
  }

  &.content-block__bubble--tertiary,
  .bg-variant-brand-tertiary & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: returnColorCSSVar('brand-secondary');
      }
      .content-block__bubble-bottom.bubble3 {
        color: returnColorCSSVar('brand-primary');
      }
    }
  }

  .bg-variant-white.carousel--photo & {
    @include viewport--l('inversed') {
      .content-block__bubble-top.bubble3 {
        color: returnColorCSSVar('brand-secondary');
      }
      .content-block__bubble-bottom.bubble3 {
        color: returnColorCSSVar('brand-primary');
      }
    }
  }

  @include viewport--l {  
    .right {
      text-align: right;
    }
    &.content-block__bubble--primary,
    .bg-variant-brand-primary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-primary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-primary');
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--secondary,
    .bg-variant-brand-secondary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-secondary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-secondary');
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--quaternary,
    .bg-variant-brand-quaternary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: #659dab;
      }

      .content-block__bubble-bottom {
        background-color: #659dab;
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--quinary,
    .bg-variant-brand-quinary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-quinary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-quinary');
        color: returnColorCSSVar('white');
      }
    }

    &.content-block__bubble--senary,
    .bg-variant-brand-senary & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-senary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-senary');
        color: returnColorCSSVar('white');
      }
    }

    .bg-variant-brand-tertiary.carousel--photo &,
    .bg-variant-brand-tertiary.video--full-width & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-primary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-primary');
        color: returnColorCSSVar('white');
      }
    }

    .bg-variant-white.carousel--photo &,
    .bg-variant-white.video--full-width & {
      .content-block__bubble-top {
        background-color: returnColorCSSVar('white');
        color: returnColorCSSVar('brand-primary');
      }

      .content-block__bubble-bottom {
        background-color: returnColorCSSVar('brand-primary');
        color: returnColorCSSVar('white');
      }
    }
  }
}