Article header viseo formatting changed with v

SP PB 5.7.1 Helix Template 2.1.3 since I upgraded to the current versions my blog videos are not displaying correctly. Before the update everything was good now not good.

I studied the css in website with upgraded vs not upgraded and working correctly.

The only difference I can see is in the one working correctly contains:

HTML
<div class="article-featured-video">
<div class="ratio ratio-16x9">
<iframe src="//www.youtube.com/embed/YZcT74ZqkOA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
            </div>
        </div>
<div class="ratio ratio-16x9">
<iframe src="//www.youtube.com/embed/YZcT74ZqkOA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>

CSS
.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
    margin: -20px -20px 20px -20px;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid #f5f5f5;
    overflow: hidden;
}
.ratio-16x9
Specificity: (0,1,0)
 {
    --bs-aspect-ratio: 56.25%;
}
.ratio {
    position: relative;
    width: 100%;
}

and the one not displaying correctly does not contain this.

This is a staging website and not live. I use it for testing.

I will provide you with complete info below.