.a-button {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 2rem;
  cursor: pointer;
  transition: var(--transition-hover);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-12);
  border: none;
  background-color: var(--color-6);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--light);
  line-height: var(--line-height--xxxl);
  -webkit-appearance: none;
  appearance: none;
}

  @media all and (min-width: 1024px) {.a-button {
    font-size: var(--font-size--ls)
}
  }

  .a-button:hover,
  .a-button:focus-visible {
    text-decoration: none;
    color: var(--color-12);
    background-color: var(--color-5);
  }

  .a-button:disabled,
    .a-button:disabled:hover,
    .a-button:disabled:focus-visible,
    .a-button[disabled],
    .a-button[disabled]:hover,
    .a-button[disabled]:focus-visible,
    .a-button--disabled,
    .a-button--disabled:hover,
    .a-button--disabled:focus-visible {
      cursor: default;
      pointer-events: none;
      background-color: var(--color-4);
    }

  .a-button--icon {
    padding: 1rem;
  }

  .a-button--size-icon--medium .a-button__icon {
        max-width: 2.3rem;
        max-height: 2.3rem;
      }

  .a-button--center {
    justify-content: center;
    gap: 1rem;
  }

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

  .a-button--bold {
    font-weight: var(--font-weight--bold);
  }

  .a-button--secondary {
    color: var(--color-17);
    background-color: var(--color-4);
  }

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

  .a-button a {
    text-decoration: none;
    color: currentColor;
  }

  .a-button__icon {
    max-width: 1.5rem;
    max-height: 1.5rem;
    fill: currentColor;
    stroke: currentColor;
  }