:root {
  --links-gap: 1rem;
  --links-maxwidth: 62.5rem;
  --links-justification: center;
}

.links-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: var(--links-justification);
  align-items: flex-start;
  grid-gap: 1rem;
  grid-gap: var(--links-gap);
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--links-gap);
  gap: var(--links-gap);
  max-width: 62.5rem;
  max-width: var(--links-maxwidth);
  margin-left: auto;
  margin-right: auto;
}

.hero-1 .links-button {
    --links-font-family: var(--font-family-heading);
    --links-font-size: 1rem;
    --links-font-weight: 400;
    --links-padding: clamp(0.75rem, 2vw, 0.85rem) clamp(2.5rem, 4vw, 3.8rem);
    font-family: var(--links-font-family);
    font-size: var(--links-font-size);
    font-weight: var(--links-font-weight);
    padding: var(--links-padding);
    border-top-left-radius: var(--button-border-radius);
  }