:root {
  --nudging-box-background-color: var(--color-cyan-light);
  --nudging-box-padding-inline: var(--inner-container-padding);
}

.nudging-box {
  background-color: var(--nudging-box-background-color);
  padding-block: 4rem;
  padding-inline: var(--nudging-box-padding-inline);
}

.nudging-box__inner {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  text-align: center;

  @include use-responsive-sizing(gap, $gaps, $start-breakpoint: m);

  @include mq($from: m) {
    grid-template-columns: 4fr 8fr;
    text-align: start;
  }
}

.nudging-box__image-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nudging-box__image {
  max-inline-size: 20rem;
}

.nudging-box__headline {
  margin-block-end: 1rem;
}

.nudging-box__text {
  font-size: 1.4rem;
  margin-block-end: 3rem;
}

.nudging-box__button {
  @include mq($from: m) {
    --button-width: 100%;
  }
}

.nudging-box__cta-text {
  --link-color: var(--color-orange);
  --line-underline-color: var(--color-orange);
  --link-font-weight: var(--font-weight-semibold);

  font-size: 1.6rem;
  font-weight: var(--font-weight-semibold);
  margin-block-start: 1.5rem;
}