Paginación de puntos que se estiran

<section class="uv-nsd" aria-roledescription="carrusel" aria-label="Destacados"><div class="tr" tabindex="0"><article style="--a:#ff9a8b;--b:#ff6a88" aria-label="1 / 4"><b>Nuevas rutas de verano</b></article><article style="--a:#a1c4fd;--b:#c2e9fb" aria-label="2 / 4"><b>Escapadas de fin de semana</b></article><article style="--a:#d4fc79;--b:#96e6a1" aria-label="3 / 4"><b>Planes en la naturaleza</b></article><article style="--a:#fbc2eb;--b:#a6c1ee" aria-label="4 / 4"><b>Ciudades para descubrir a pie</b></article></div><div class="ft"><button type="button" class="pv" aria-label="Anterior"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="dt"><button type="button" aria-label="Ir a 1" aria-current="true"><i></i></button><button type="button" aria-label="Ir a 2"><i></i></button><button type="button" aria-label="Ir a 3"><i></i></button><button type="button" aria-label="Ir a 4"><i></i></button></div><button type="button" class="nx" aria-label="Siguiente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></section>