.instructions-steps {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0 1rem;
    --step-done: #0C5C40;
    --on-step-done: white;
}

.instructions-steps .step-icon {
    border-radius: 1000px;
    width: 2rem; height: 2rem;
    margin-top: 0.5rem;
    display: flex; align-items: center; justify-content: space-around;
}

.instructions-steps > .step-done {
    display: flex; flex-flow: column nowrap; align-items: center;
}

.instructions-steps > .step-done > .step-icon {
    background: var(--step-done); color: var(--on-step-done);
}

.instructions-steps > .step-done > .step-icon > span {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA3MiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzJfOSkiPgo8cGF0aCBkPSJNMzAgNTRMOS4xNjk5OCAzMy4xN0wxMiAzMC4zNEMxMy41NiAyOC43OCAxNi4wOSAyOC43OCAxNy42NiAzMC4zNEwzMCA0Mi42OEw1MS45MiAyMC43NkM1My40OCAxOS4yIDU2LjAxIDE5LjIgNTcuNTggMjAuNzZMNjAuNDEgMjMuNTlMMzAgNTRaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzJfOSI+CjxyZWN0IHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgZmlsbD0idHJhbnNwYXJlbnQiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
    background-size: cover;
    width: 1.5rem; height: 1.5rem;
}

.instructions-steps > .step-done > .step-line {
    width: 0px;
    min-height: 2rem;
    flex-grow: 1;
    margin-top: 0.25rem;
    border: 1px solid var(--step-done);
}

.instructions-steps > .step-done + p {
    color: grey;
}

.instructions-steps > .step-active > .step-icon {
    border: 1px solid grey;
}