.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--primary-color);
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;

  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem 0;
  }

  h2 {
    color: white;
  }

  button,
  .button {
    width: 100%;
    white-space: nowrap;
    text-align: center;
  }

  img {
    /* Make the arrows line up with the center of the button */
    transform: translateY(-3rem);
    max-width: 30vw;
  }
}

@media (max-width: 768px) {
  .cta .arrows {
    /* Make the arrows line up with the center of the button */
    transform: translateY(-0.75rem);
  }
}