Адаптивная карточка продукта с эффектом всплывающего окна быстрого просмотра [HTML - CSS - JavaScript]

Создайте адаптивный раздел карты продукта с всплывающим окном быстрого просмотра карты предварительного просмотра продукта по щелчку, используя html css и vanilla javascript.
как сделать адаптивный раздел карточки продукта, используя сетку css и всплывающее окно быстрого просмотра карточки продукта, используя учебник по ванильному javascript для начинающих.

✔ Скачать готовы код: https://boosty.to/monster-tem/posts/9df0c294-da2b-477c-8be3-cb082bf9e27b

✔ Поддержать канал : https://boosty.to/monster-tem/donate
✔ Яндекс Дзен: https://dzen.ru/monstertem
✔ ВКонтакте: https://vk.com/monstertem
✔ Инстаграм: https://www.instagram.com/monster_tem/
✔ Boosty: https://boosty.to/monster-tem
✔ Телеграм: https://t.me/monster_tem

✔ swiper.js link: https://swiperjs.com/
✔ font awesome cdn link: https://cdnjs.com/libraries/font-awesome
✔ google fonts: https://fonts.google.com/specimen/Mon...
✔ clip-path generator: https://bennettfeely.com/clippy/

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : - 
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/