.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 20px;
  border: 1px solid var(--clr-cta-secondary-default);
  border-radius: var(--default-border-radius);
  font-family: var(--font-secondary);
  font-weight: 700;
  text-decoration: none;
  background-color: var(--clr-cta-secondary-default);
  color: var(--clr-cta-secondary-text);
  cursor: pointer;
  transition: background-color 250ms ease-in-out, color 250ms ease-in-out, border 250ms ease-in-out;
}

.Button:hover,
  .Button:focus {
    border-color: var(--clr-cta-secondary-default);
    text-decoration: underline;
    background-color: var(--clr-cta-secondary-hover);
    color: var(--clr-cta-secondary-text);
  }

.Button svg {
    margin-left: 12px;
  }

.Button svg path {
      fill: currentColor;
    }

.Button + .Button {
    margin-left: 16px;
  }

@media screen and (max-width: 768px) {

.Button + .Button {
      display: flex;
      margin-top: 16px;
      margin-left: 0;
  }
    }

.Button--inverted {
  border-color: var(--clr-cta-tertiary-default);
  background-color: transparent;
  color: var(--clr-cta-tertiary-text);
}

.Button--inverted:hover,
  .Button--inverted:focus {
    border-color: var(--clr-cta-tertiary-default);
    text-decoration: none;
    background-color: var(--clr-cta-tertiary-hover);
    color: var(--clr-cta-tertiary-text);
  }

.Button--primary {
  border-color: var(--clr-cta-primary-default);
  background-color: var(--clr-cta-primary-default);
  color: var(--clr-cta-primary-text);
}

.Button--primary:hover,
  .Button--primary:focus {
    border-color: var(--clr-cta-primary-default);
    text-decoration: underline;
    background-color: var(--clr-cta-primary-hover);
    color: var(--clr-cta-primary-text);
  }

.Button--left {
  margin-right: auto;
}

.Button--center {
  margin-right: auto;
  margin-left: auto;
}

.Button--right {
  margin-left: auto;
}

.Button--full {
  display: flex;
  width: 100%;
  text-align: center;
}

.Button--fit-content {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-right: 2rem;
  padding-left: 2rem;
}

.Text + .Button,
.Picture + .Button,
.Well + .Button {
  margin-top: var(--margin-s);
}

@media screen and (max-width: 768px) {

.Text + .Button,
.Picture + .Button,
.Well + .Button {
    margin-top: var(--margin-s--mobile);
}
  }

.Accordion + .Button {
  margin-top: var(--margin-m);
}

@media screen and (max-width: 768px) {

.Accordion + .Button {
    margin-top: var(--margin-m--mobile);
}
  }