.medspa-buttons {
  --gap: 30px;
  --button-padding: 50px 30px;
  --button-font-size: 30;
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--gap);
}

.medspa-buttons__button {
  -ms-flex-align: center;
      align-items: center;
  background: rgb(var(--color-accent));
  font-family: var(--font-family-medpsa);
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  font-size: calc(var(--button-font-size) / var(--base) * 1rem);
  font-weight: 300;
  -ms-flex-pack: center;
      justify-content: center;
  padding: var(--button-padding);
  text-align: center;
  text-transform: uppercase;
  transition: 250ms all ease;
}
@media (pointer: fine) {
  .medspa-buttons__button:hover {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-light));
  }
}

@media (min-width: 992px) {
  .medspa-buttons {
    --gap: 100px;
    --button-padding: 70px 30px;
    --button-font-size: 40;
    -ms-flex-direction: row;
        flex-direction: row;
    grid-template-columns: 1fr 1fr;
  }
}
