Reverse CSS Counter with Bootstrap 5.2

Question

I have two ordered-lists that I am displaying - one is ascending and the other descending. Currently, the HTML attribute "reversed" is poorly supported, and it seems Bootstrap's documentation recommends using CSS for their counters, but I am having a difficult time understanding how to accomplish a descending order with dynamic lists. Most examples I see online suggest hard-coding the number to start, but again, my lists are dynamic.

I don't want to change the style of the content, so I don't think there is a need to manipulate "content", correct? Here is what my CSS looks like currently

ol.history {
    counter-reset: descendingList ;
}

ol.history li::before {
    counter-increment: descendingList -1;
}

Where my HTML code looks like

<ol class="list-group list-group-numbered mb-3 history">
   <li class="list-group-item"></li>
   <li class="list-group-item"></li>
</ol>

Do I need to utilize javascript to accomplish this? Also, I know that since CSS counters are 0-base, I need to add an additional increment somewhere to make my last list-group-item be 1.

UPDATE

Just to expand upon this...

What if I have two ordered-lists, <ol>, and I want to combine both lists for the count; however, I want the second, bottom list to begin the sequence in descending order, then the first list continues, but in ascending order.

It would look something like this...