How to make sure that the image in the Slick-slider is not cut off when the screen size is reduced?

Question

Slick

How in slick-slider to make sure that the image is not cut off at ANY screen resolutions? I mean that the picture that you see on the desktop version was also visible at small screen resolutions without cropping? I've tried object-fit, both alone and in conjunction with various properties. I also tried this method, that the .item block in which the photo is stored is given the following properties:

overflow: hidden;
   position: relative;
   width: 100%;
   padding-bottom: 100%;

And the picture itself is:

position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: 100% 100%;

But in the end it didn't help

The site itself ilyin1ib.beget.tech

All the code jsfiddle.net/juc0q4hx/

How to finally make it look normal and so that nothing floats or cuts?
This happens even despite the fact that I made the indents less than in the
PS layout, the layout itself https://www.figma.com/file/gS0qw4gjqhQ0KVjJuWXbzB/...

How it should look


Like mine