:root {
  --circle-size: clamp(0.5rem, 1.5vw, 0.75rem);
  --spacing: clamp(0.25rem, 2vw, 0.5rem); }

.c-stepper {
  display: flex; }

.c-stepper__item,
.c-stepper__active {
  display: flex;
  gap: var(--spacing);
  align-items: center; }
  .c-stepper__item:before,
  .c-stepper__active:before {
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%; }
  .c-stepper__item:after,
  .c-stepper__active:after {
    content: "";
    position: relative;
    z-index: 0;
    height: 2px;
    flex: 1;
    margin-right: 0.5rem; }
  .c-stepper__item:not(:last-child),
  .c-stepper__active:not(:last-child) {
    flex: 1; }

.c-stepper__title {
  font-size: clamp(0.9rem, 4vw, 0.9rem);
  padding-top: 6px; }

.c-stepper__item > .c-stepper__title {
  font-weight: normal;
  opacity: 0.5; }

.c-stepper__active > .c-stepper__title {
  font-weight: 700; }

.c-stepper__active:before, .c-stepper__active:after {
  background-color: #026bff; }

.c-stepper__item:before, .c-stepper__item:after {
  background-color: lightgrey; }

/*** Non-demo CSS ***/
.wrapper {
  margin: 1rem auto 0; }

*,
*:before,
*:after {
  box-sizing: border-box; }

@media only screen and (max-width: 767px) {
  .c-stepper__title {
    font-size: 0.7rem;
    padding-top: 6px; } }

/*# sourceMappingURL=stepper.css.map */