.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  width: max-content;
  font-family: montserrat, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0.8rem;
  padding: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.cta-green {
  color: var(--light-grey);
  background-color: var(--green-yellow);
}

.cta-green:active,
.cta-green:focus {
  color: var(--light-grey);
  background-color: var(--dark-grey);
}

.cta-grey {
  color: var(--light-grey);
  background-color: var(--dark-grey);
}

.cta-grey:active,
.cta-grey:focus {
  color: var(--light-grey);
  background-color: var(--green-yellow);
}

.cta-white {
  color: var(--dark-grey);
  background-color: var(--light-grey);
}

.cta-white:active,
.cta-white:focus {
  color: var(--light-grey);
  background-color: var(--green-yellow);
}

@media (min-width: 1280px) {
  .cta-green:hover,
  .cta-green:focus {
    color: var(--light-grey);
    background-color: var(--dark-grey);
  }

  .cta-green:active {
    color: var(--light-grey);
    background-color: var(--green-yellow);
  }

  .cta-grey:hover,
  .cta-grey:focus {
    color: var(--light-grey);
    background-color: var(--green-yellow);
  }

  .cta-grey:active {
    color: var(--light-grey);
    background-color: var(--dark-grey);
  }

  .cta-white:hover,
  .cta-white:focus {
    color: var(--light-grey);
    background-color: var(--green-yellow);
  }

  .cta-white:active {
    color: var(--light-grey);
    background-color: var(--dark-grey);
  }
}