.btn-oskar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-ui);
  padding: 17px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}

.btn-cta {
  background-color: var(--c-cta);
  color: var(--c-white);
  border-color: transparent;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background-color: var(--c-cta-hover);
  color: var(--c-white);
}

.btn-header-cta {
  background-color: var(--c-white);
  color: var(--c-heading);
  border-color: var(--c-heading);
  padding: 12px 20px;
}

.btn-header-cta:hover,
.btn-header-cta:focus-visible {
  background-color: var(--c-white);
  color: var(--c-hover);
  border-color: var(--c-hover);
}

.btn-hero-dark {
  background-color: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}

.btn-hero-dark:hover,
.btn-hero-dark:focus-visible {
  background-color: transparent;
  color: var(--c-hover);
  border-color: var(--c-hover);
}

.btn-final-cta {
  background-color: var(--c-white);
  color: var(--c-heading);
  border-color: transparent;
}

.btn-final-cta:hover,
.btn-final-cta:focus-visible {
  background-color: var(--c-white);
  color: var(--c-hover);
  border-color: var(--c-final-cta-hover-border);
}