.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-space-3);
  margin: 0;
  color: var(--ab-color-bridge-cyan);
  font: var(--ab-font-weight-semibold) var(--ab-font-size-technical) / 1.4 var(--ab-font-mono);
  letter-spacing: var(--ab-letter-spacing-technical);
  text-transform: uppercase;
}

.ab-eyebrow::before,
.ab-eyebrow::after {
  width: clamp(1.5rem, 6vw, 4rem);
  height: 1px;
  flex: 0 1 auto;
  content: "";
}

.ab-eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--ab-color-hairline));
}

.ab-eyebrow::after {
  background: linear-gradient(90deg, var(--ab-color-hairline), transparent);
}

.ab-eyebrow--start {
  justify-content: flex-start;
}

.ab-eyebrow--start::before {
  display: none;
}

@media (max-width: 30rem) {
  .ab-eyebrow::before,
  .ab-eyebrow::after {
    width: 1.5rem;
  }
}