.wizard {
    align-items: center;
    display: flex;
    justify-content: center;

    /* Demo */
    height: 8rem;
    width: 8rem;
}

.wizard__step {
    /* Make all steps have the same width */
    flex: 1;
}

.wizard__dot {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

.wizard__connector {
    flex: 1;
    height: 1px;
    background-color: #d1d5db;
}

.wizard__step:first-child .wizard__connector:first-child,
.wizard__step:last-child .wizard__connector:last-child {
    background-color: transparent;
}

.wizard__number {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Rounded border */
    background-color: #d1d5db;
    border-radius: 9999px;
    height: 1rem;
    width: 1rem;
}