.cta-box {
  &__text {
    &,
    p:not(.cta-box--paragraph__p) {
      @include font-style('title--l', 'title--xl');
      margin-bottom: 0;
    }
  }
}

@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 {
  @include cta-box();
}

.cta-box--paragraph {
 .cta-box__text {
    max-width: grid-columns(10, 12);
  }

  // sorry for whoever needs to touch this ever again
  // i hope its no one :) bye
  &__p {
    margin-top: $spacing--m;
    width: grid-columns(9, 12);;
    @include font-style('body--m'); 
  }
}