Listeye Şu Şekilde Numaralandırma Nasıl Yapabilirim?

Listeye nasıl ayrı numaralandırmayı CSS ile otomatik ekletirim?
Örnek kodu yapısı:

<li class="list-h2">A</li>
<li class="list-h3">Ali</li>
<li class="list-h3">Ayşe</li>
<li class="list-h2">B</li>
<li class="list-h3">Burak</li>

h2'ler ayrı numara, h3'ler kendi içinde ayrı numara alacak?
Anlaşılmadıysa:
"A" 1 olacak "B" 2 olacak, "Ali" 1 olacak, "Ayşe" 2 olacak ama "Burak" ne 5, nede 3 olacak.

Burak kaç olacak

1. h2 class'ı bulunanlar 1-2-3-4 diye giderken h3 bulunanlar her h2'den sonra sıfırlanıp 1-2-3 şeklinde gidecek.

Hocam bunun için en sağlıklı yöntem h2 ler li elementi yerine h2 elementi olacak yani h2 lerden sonra liste gelecek. Ekran okuyucuları ve seo açısından daha verimli olacağı kanaatindeyim

https://jsfiddle.net/sevy83rz/6/

şöyle bir işlev var istersen geliştirilebilir buradan yola çıkarak devam edebilirsin yapamazsan akşam müsait olunca bakabiliriz.

Listenin tamamı numaralardan oluşunca karmaşa oldu. a-b-c yaptım alt listeleri. Sonuç: https://prnt.sc/rfw7ol

HTML yapısında hata yapmışım, şöyle olmalıymış;

<li class="list-h2">A
    <ul>
        <li class="list-h3">Ali</li>
        <li class="list-h3">Ayşe</li>
    </ul>
</li>
<li class="list-h2">B</li>
    <ul>
        <li class="list-h3">Burak</li>
    </ul>
</li>

CSS olarak ise;

li {list-style-type:decimal;}
li ul li {list-style-type: lower-alpha;}

Canlı hali: https://miyavliyo.com/american-shorthair/