Improving CLS and having a responsive image

Question

I've been struggling with improving the CLS on a website.

So I've tried to add a parent container so the image will adjust to the size of that container. See below:

    .cls-parent {
  width: 100%;
}

.cls-container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 26.04% 0 0 0; /* 26.04% / (96 / 25) = 100 / (1900 / 500) */
}

.cls-container img {
  display: block;
  max-width:100%;
  max-height:100%;
  width: auto;
  height: auto;
}

and the HTML:

<div class="cls-parent">
<div class="cls-container">
<img width="1900px" height="631" src="/wp-content/uploads/2020/11/Header_BlackFriday_v2_ENG.jpg">
</div>
</div>

But it's not working, I'm not sure what I do wrong.