.getStarted {
  height: 4rem;
  padding: 0.8rem 1.6rem !important;
  background-color: var(--color-primary-black-action);
  border-radius: 8px;
  color: var(--color-neutral-text-on-primary);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  border: none;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  position: relative;
  text-align: center;
  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--button-gradient);
    opacity: 0.4;
    border-radius: inherit;
    transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
  }

  &:hover {
    background-color: var(--color-primary-black-action-hover);
    color: var(--color-neutral-text-on-primary);

    &::before {
      opacity: 1;
    }
  }
}

:global(.navbar-sidebar) .getStarted {
  display: none;
}

@media (max-width: 768px) {
  .getStarted {
    width: 100%;
  }

  :global(.navbar__inner) .getStarted {
    display: none;
  }

  :global(.navbar-sidebar) .getStarted {
    display: block;
  }
}
