:root {
  --cta-box-background-color: var(--color-midnight);
  --cta-box-color: var(--color-white);
  --cta-box-z-index: #{z-index('default')};
}

.cta-box {
  background-color: var(--cta-box-background-color);
  color: var(--cta-box-color);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
  z-index: var(--cta-box-z-index);

  @include use-responsive-sizing(padding-block, responsive-map(xs 3rem, xl 5rem));
  @include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 5rem));
}

.cta-box__text {
  line-height: var(--line-height-body);

  > * + * {
    margin-block-start: 1.5rem;
  }
}

.cta-box__headline,
.cta-box__text,
.cta-box__button {
  position: relative;
  z-index: 2;
}

.cta-box__icon {
  color: var(--color-orange);
  inset-block-start: 100%;
  inset-inline: 100%;
  position: absolute;
  transform: translate(-115%, -70%) rotate(60deg);
  z-index: 1;

  @include use-responsive-sizing(font-size, responsive-map(xs 12rem, l 17rem));

  @include mq($from: l) {
    transform: translate(calc(-100% + 2rem), -66%) rotate(50deg);
  }
}