.cta-box {
  &__text {
    &, p {
      @include font-style('title--l', 'title--xl');
      margin-bottom: 0;
    }
  }
  // overwrite default text color for yellow background
  &.bg-brand--yellow {
    color: $color-brand--four;
  }
}



@include viewport--l('inversed') {
  .cta-box {
    &__wrapper {
      padding-bottom: $spacing--l;
      padding-top: $spacing--l;
    }

    .button {
      margin-top: $spacing--m;
    }

    .button-group {
      flex-shrink: 1;
      margin-top: $spacing--s;

      .button {
        margin-top: $spacing--xs;
      }
    }
  }
}

@include viewport--l {
  .cta-box {
    &__wrapper {
      align-items: flex-end;
      display: flex;
      justify-content: space-between;
      padding-bottom: $spacing--xxl;
      padding-top: $spacing--xxl;
    }

    &__text {
      align-self: flex-start;
      max-width: grid-columns(9,12);
      position: relative;
      top: $spacing--xs;

      & + .button,
      & + .button-group {
        flex-shrink: 0;
        margin-left: 30px;
      }
    }
  }
}
