.onboarding-stages {
    position: absolute;
    inset: 0 auto 0 2rem;
    gap: 7rem;
}
.onboarding-stage {
    position: relative;
    flex: 1;

    --bc-clr-onboarding-400: var(--bc-clr-dark-400);
    --bc-clr-onboarding-500: var(--bc-clr-dark-500);
}
.onboarding-stage[data-onboarding="complete"] {
    --bc-clr-onboarding-400: var(--bc-clr-primary-400);
    --bc-clr-onboarding-500: var(--bc-clr-primary-600);
}
.onboarding-stage[data-onboarding="current"] .onboarding-stage-number {
    --bc-clr-onboarding-400: var(--bc-clr-text-100);
    --bc-clr-onboarding-500: var(--bc-clr-text-800);
}
.onboarding-stage:not(:last-child)::before {
    content: "";
    background: var(--bc-clr-onboarding-400);
    position: absolute;
    inset: 50% auto -100% 2.84rem;
    z-index: -1;
    width: .2rem;
}
.onboarding-stage-number {
    background: var(--bc-clr-onboarding-500);
    border: 4px solid var(--bc-clr-onboarding-400);
    border-radius: 100%;
    margin: 0;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    line-height: 0;
    color: var(--bc-clr-text-100);
}
.onboarding-stage-detail {
    width: min-content;
    font-size: var(--bc-fs-200);
    font-weight: 300;
    color: var(--bc-clr-dark-100);
}

@media (max-width: 900px) and (min-width: 700px) {
    body {
        margin-left: 16rem;
    }
}
@media (max-width: 700px) {
    .onboarding-stages {
        display: none;
    }
}

.label {
    color: var(--bc-clr-text-100);
}