Why does the slick bug happen when the first element appears?

Question

css

Good afternoon, I have a main page on which the animation of the appearance of all elements takes place on the whole screen, on this screen there are 3 sliders that are interconnected with each other, but when the animation of the slider with pictures appears, the first element for some reason is cut off by half, but if you scroll to the right, they are aligned, but when you scroll to the first slide again, its animation appears with a delay, and it is again cut off by half. I hope I have clearly described the problem, I am attaching a link to the github page so that you can feel the problem.
Thank you in advance.
https://forsuren1.github.io/WGM/
PS I tried all possible options with the slider width, the problem was not solved.

Answer 1

seems to break this:

.main-slider__child-item.slick-slide.slick-current.slick-active {margin-right: 30px;}

how to fix and how to replace xs. you need to debug