.cta {
  padding: 8px 14px;
  color: var(--black-medium);
  font-size: 20px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 800;
  display: block;
  width: fit-content;
}
.cta--transparent {
  background-color: transparent;
  border: 2px solid var(--white-light);
  color: var(--white-light);
}
.cta--transparent:hover {
  background-color: var(--white-light);
  border: 2px solid var(--white-light);
  color: var(--black-light);
}
.cta--large {
  padding: 16px 22px;
}
.cta--white {
  background-color: var(--white-light);
  transition: all 150ms ease;
  border: 2px solid var(--white-light);
}
.cta--white:hover {
  background-color: var(--black-dark);
  color: var(--white-light);
}
.cta--dark {
  background-color: var(--black-medium);
  color: var(--white-light);
  transition: all 150ms ease;
  border: 2px solid var(--black-medium);
}
.cta--dark:hover {
  background-color: var(--black-dark);
}