How to properly style dots in Slick Slider?

Question

css

There is such a design of points in the slider

, which by design have an active point - width: 8px and height: 8px, the second one - width: 6px and height: 6px, and the third one - width: 4px and height: 4px, but it doesn’t work make the dots the same size.
How to fix it and implement exactly this kind of points? Here is a link to CodePen with what I got.

Answer 1

.slick-dots button {
font-size:0;
padding:0;
}
.slick-dots li:nth-child(1) button {
width:8px;
height:8px;
}
.slick-dots li:nth-child(2) button {
width:6px;
height:6px;
}
.slick-dots li:nth-child(3) button {
width:4px;
height:4px;
}