.cta {
  padding: 0.85rem 1.5rem;
  font-family: "Protest Riot";
  font-size: 1.75rem;
  text-decoration: none;
  color: var(--color-purple);
  box-shadow: 0.5rem 0.5rem var(--color-mint);
  background-color: var(--color-sunset);
  border-color: var(--color-sunset);
  transition: all 0.3s linear;

  &:hover {
    box-shadow: 0 0 var(--color-mint);
  }
}

/* INFO: rr 29aug26 the two grounds swapped, so the second call to action of a pair weighs exactly what the first weighs */
.cta--inverted {
  color: var(--color-sunset);
  background-color: var(--color-purple);
  border-color: var(--color-purple);
}

.cta--mini {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  box-shadow: 0.25rem 0.25rem var(--color-mint);
}

/* INFO: rr 02sep26 the navbar sets a link beside its call to action, in the same type and ink but on no ground */
.cta-link {
  padding: 0.25rem 0;
  font-family: "Protest Riot";
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-purple);
}

.cta-subtitle {
  font-family: "Protest Riot";
  font-size: 0.9rem;
  color: var(--color-purple);
  margin: 1rem 0rem 1rem;
}

/* INFO: rr 29aug26 equal columns sized on the longest label, "Démo avec Raphaële", so neither call to action outweighs the other */
.cta-pair {
  display: inline-grid;
  grid-auto-columns: 18rem;
  gap: 1.5rem;
  text-align: center;

  /* INFO: rr 31aug26 side by side from md, where the container first holds two whole buttons and the gap */
  @media (min-width: 768px) {
    grid-auto-flow: column;
    column-gap: 2.5rem;
  }
}