:root {
  --button-bg-color: var(--olive);
  --button-hover-bg-color: #066E55;
}

.btn {
  cursor: pointer;
  padding-block: var(--s-1);
  padding-inline: var(--s1);
  background: var(--button-bg-color);
  color: var(--cream);
  text-decoration: none;
  border-radius: .5rem;
}

.btn-sm {
  padding-block: var(--s-3);
  padding-inline: var(--s-1);
}

.btn-lg {
  padding-block: var(--s0);
  padding-inline: var(--s2);
  font-size: var(--s1);
}

.btn:hover {
}

.center {
  box-sizing: content-box;
  margin-inline: auto;
}

.text-center {
  text-align: center;
}

.box {
  padding: var(--s1);
}

.rounded {
  border-radius: .75rem;
}

.stack-5 > * + * { margin-top: var(--s-5) }
.stack-4 > * + * { margin-top: var(--s-4) }
.stack-3 > * + * { margin-top: var(--s-3) }
.stack-2 > * + * { margin-top: var(--s-2) }
.stack-1 > * + * { margin-top: var(--s-1) }
.stack0 > * + * { margin-top: var(--s0) }
.stack1 > * + * { margin-top: var(--s1) }
.stack2 > * + * { margin-top: var(--s2) }
.stack3 > * + * { margin-top: var(--s3) }
.stack4 > * + * { margin-top: var(--s4) }
.stack5 > * + * { margin-top: var(--s5) }

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc(( 30rem - 100%) * 999);
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-grid-width, 250px), 100%), 1fr));
  gap: var(--grid-gap, 1rem);
}

.grid-full-span {
  grid-column-start: 1;
  grid-column-end: -1;
}