.button {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  text-align: center;
}

.button-primary {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-navy-deep);
  transition: all var(--duration-normal) var(--ease-out);
}

.button-primary:hover {
  opacity: var(--opacity-hover);
}

.button-secondary {
  background-color: transparent;
  border: 1px solid currentColor;
}

.button-text {
  background-color: transparent;
  color: var(--color-brand-gold);
}

@media (max-width: 360px) {
  .button {
    width: 100%;
    padding: 1rem 1.25rem;
  }
}