.hero-links {
  --btn-border-width: 0px;
  --btn-color: var(--link-color, var(--color-accent, initial));
  --btn-hover-color: var(--btn-color);
  --btn-color-bg: var(--color-neutral-100);
  --btn-hover-color-bg: var(--color-neutral-200);
  --btn-radius: clamp(1.5em, 5vw, 3em);
  --btn-padding-vertical: clamp(.7rem, 1.35vw ,1rem);
  --btn-padding-horizontal: clamp(.7rem, 1.35vw ,1rem);
  --btn-gap: var(--btn-padding-horizontal);
  container: hero-links / inline-size;
  gap: var(--btn-padding-horizontal);
  font-size: var(--btn-padding-horizontal);
  white-space: nowrap;
}

.hero-links span {
  font-weight: 600;
  text-transform: uppercase;
}

.hero-links a .sub-title {
  text-transform: none;
  font-weight: normal;
  color: var(--color-fg);
}

.hero-links a:not(:hover) i:last-child {
  color: var(--color-neutral-400);
}

.hero-links .link-title-suffix {
  text-align: right;
  display: flex;
}

@container hero-links (width < 700px) {
  .hero-links li { flex-basis: auto; }
}

@container hero-links (width < 600px) {
  .hero-links li { min-width: 100%; }
}