.button-wrapper {
  display: flex;
  width: 100%;
}

.button-wrapper--left {
  justify-content: flex-start;
}

.button-wrapper--center {
  justify-content: center;
}

.button-wrapper--right {
  justify-content: flex-end;
}

.button-wrapper--vertical-top {
  align-self: start;
}

.button-wrapper--vertical-center {
  align-self: center;
}

.button-wrapper--vertical-bottom {
  align-self: end;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 2px solid currentColor;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  /* color: var(--color-accent); */
}

.button--small {
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}

.button--medium {
  padding: 0.85rem 1.4rem;
  font-size: 1rem;
}

.button--large {
  padding: 1.1rem 1.8rem;
  font-size: 1.25rem;
}

.button {
  color: var(--button-color);
}

.button:hover {
  color: var(--button-color);
}


.button--light-green {
  background: #ddf8ed;
  --button-color: #11553a;
}

.button--green {
  background: #11553a;
  --button-color: #fff;
}

.button--light-pink {
  /* background: #fdecf4; */
  --button-color: #710a38;
}
.button--pink {
  background: #710a38;
  --button-color: #fff;
}
.button--radius-none {
  border-radius: 0;
}

.button--radius-small {
  border-radius: .5rem;
}

.button--radius-big {
  border-radius: 3rem;
}