.ctaBanner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;

  padding-top: var(--padding--4xl);
  padding-right: var(--padding--xl);
  padding-bottom: var(--padding--4xl);
  padding-left: var(--padding--xl);

  text-decoration: none;

  background: rgb(var(--background--blue-low-default--light));

  .typography {
    max-inline-size: 520px;
    margin: 0 auto;
    text-align: center;
    text-wrap: balance;
  }

  @media @screen-sm {
    & {
      padding-right: var(--padding--4xl);
      padding-left: var(--padding--4xl);
    }
  }
}

.ctaBanner__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}