.ordered-li {
    --icon-size: 24rem;
}

.ordered-li.active .ordered-li__icon {
    opacity: 1;
}

.ordered-li.active h4 {
    color: var(--primary) !important;
}

.ordered-li.active {
    z-index: 2;
    justify-content: space-between;
    border-right: 1px solid var(--neutral-semi-dark) !important;
}

.ordered-li.active::before {
    font-size: var(--h3);
    color: var(--primary);
}

.ordered-li:last-of-type {
    border-right: none;
}

.ordered-li::before {
    content: '0' counter(orderedCounter);

    background-color: var(--base-trans-90);
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 0 26px var(--base);
    z-index: 1;

    display: block;
    margin-bottom: var(--space-xxl);
    line-height: 1;
    font-weight: 500;
    font-size: var(--h1);
    font-family: 'Aeonik';

    position: absolute;
    top: var(--space-m);
    left: var(--space-m);

    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 991px) {
    .ordered-li::before {
        margin-bottom: var(--space-m);
    }

    .ordered-li.active::before {
        font-size: var(--h2);
    }

    .ordered-li__icon {
      max-height: var(--icon-size) !important;
    }

    .ordered-li__icon-wrapper {
        max-height: fit-content;
    }
}