.step-progressbar {
    list-style: none;
    counter-reset: step;
    display: flex;
    padding: 0;
    width:100%;
}

.step-progressbar__item {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    position: relative;
}

    .step-progressbar__item:before {
        width: 3em;
        height: 3em;
        content: counter(step);
        counter-increment: step;
        align-self: center;
        background: #cbd6cb;
        color: #fff;
        border-radius: 100%;
        line-height: 3em;
        margin-bottom: 0.5em;
    }

    .step-progressbar__item:after {
        height: 2px;
        width: calc(100% - 4em);
        content: '';
        background: #cbd6cb;
        position: absolute;
        top: 1.5em;
        left: calc(50% + 2em);
    }

    .step-progressbar__item:last-child:after {
        content: none;
    }

.step-progressbar__item--active:before {
    background: #fff;
}

.step-progressbar__item--complete:before {
    content: '✔';
    background: #58CF39;
}

.step-progressbar__item--locked:before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-lock-fill' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 0a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5v-5a2.5 2.5 0 0 1 2-2.45V4a4 4 0 0 1 4-4m0 1a3 3 0 0 0-3 3v2h6V4a3 3 0 0 0-3-3'/></svg>");
    background: #6fe7ed;
}