Скрипт на JS для отображения необходимого изображения

Javascript та Typescript, Десктопні додатки — неправильно зазначені категорії?

Необходимо реализовать скрипт на Java Script

Суть скрипта заключается в том, чтобы он смог выводить необходимое изображение в карточки товара на определенном разрешении по предусмотренным условиям.

Объяснение задачи.

Допустим есть карточки товаров которые реализованы с помощью сеток GRID или FLEX (скрин 1)

Для каждой карточки товара организованы адаптивные изображения с помощью тегов picturesrcset (скрин 2)

За счет медиа-запросов для конкретного разрешения экрана в карточке выводится необходимое изображения. При этом исходя из медиа-запросов осуществляется пере группировка сетки (GRID или FLEX) с карточками, за счет чего в одном ряду может выводится по 3, 2 или по 1 карточке.

Нужно по предусмотренным условиям (стилям CSS, перегруппировки сетки (GRID или FLEX)) назначенные на определенное разрешении (с помощью медиа-запрос), что самое важно ЕСЛИ ПОСЛЕДНЯЯ КАРТОЧКА ЯВЛЯЕТСЯ ПОСЛЕДНЕЙ И ПРИ ЭТОМ ТОЛЬКО НЕЧЕТНОЙ ВЫВОДИТЬ необходимое фото.

Пример (скрин 4):

Допустим по условии на разрешении 1045рх сетка перенастраивается таким образом чтобы в ряду было по 2 карточки. А для последней карточки если она является последней, не четной по счету и при этом для нее задается css свойство, что она должна занимать полностью весь ряд выводить изображение ( <source type="image/webp" srcset="img/favoritelatest/familyhouse_1045_full.webp" media="(max-width: 1045px)" class="flat-card__trump flat-card__trump--full">)

Если последняя карточка является нечетной последней, но для нее не задано css свойство чтобы она должна занимать полностью весь ряд выводить изображение (<source type="image/webp" srcset="img/favoritelatest/familyhouse_1045.webp" media="(max-width: 1045px)" class="flat-card__trump flat-card__trump--small">)

В случае с сеткой FLEX для последней нечетной карточки чтобы она занимала полностью весь ряд задается условие

flex: 0 1 100%;