Looking for suggestions re: keyframes & nth items

With the global root and CSS vars coming to life in Webstudio, I've been able to remove a ton of custom styles and classes. I want to remove the following code block and am looking for better ways to handle the nth-child items, as I'd need to manually increment them if I add another.

(this is a CSS-only slider that I've made, so I'd like to avoid JS)

<style>
@keyframes scrollLeft {
to {
left: calc(-1 * var(--slide-width));
}
}

.logo-slider .slide:nth-child(1) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (0) * -1);
}
.logo-slider .slide:nth-child(2) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (1) * -1);
}
.logo-slider .slide:nth-child(3) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (2) * -1);
}
.logo-slider .slide:nth-child(4) {
animation-delay: calc(var(--slide-animation-duration) / var(--slide-count) * (3) * -1);
}
</style>