いつもわかりやすい動画ありがとうございます。
JavaScript も実践的なところから、様々な方法を学ぶことが出来て助かっております。

一点、この仕上げの動画で気になる点がございます。
最後に画像を pic 1-4 に変更して、動作までは確認が出来たのですが、
ブラウザ幅を広げていくうちに、画像が img 領域からはみ出してしまいました。(領域内いっぱいに表示されない。)
MDN で object-fit のページを調べていくうちに、今回使用した cover は下記の様な説明が書かれておりました。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

cover
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡>大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブ>ジェクトの方が合うように切り取られます。

とのことで、恐らくこの pic1-4 が img ボックスの領域より大きいことが原因と考えております。他に contain もありますが、領域内で小さくなってしまいました。
このような場合、何か対処方法はあるのでしょうか？
もしあるようでしたら、ご教示いただければ幸いです。