.cta {
  background: linear-gradient(90deg, var(--purple-80) 0%, var(--purple-80) 60%, var(--purple-60) 100%);
  border-block-end: var(--thick) solid var(--purple-60);
  border-block-start: var(--thick) solid var(--purple-60);
  padding-block: var(--spacing-layout-1);
}

.cta__inner {
  background-color: var(--white);
  border-radius: var(--rounded-corners);
  padding: var(--spacing-layout-1) var(--outer-margin);
}

.cta__image { 
  margin-block-start: calc(-1 * var(--spacing-layout-2));
}

.cta__image img {
  width: 100%;
  height: auto;
}

.cta__content {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-layout-half);  
  justify-content: center;
  min-height: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .cta__content {
    text-align: start;
  }
}