added new tag

blocks/product-finder/product-finder.css

@@ -353,7 +353,6 @@
   display: block;
   width: 100%;
   overflow: hidden;
-  position: relative;
 }
 
 .product-finder-container #step-3 .card-thumb a {
@@ -369,6 +368,14 @@
   align-items: center;
 }
 
+.product-finder-container #step-3 .card-thumb .new-product-tag {
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  max-width: 100px;
+  height: auto;
+}
+
 .product-finder-container #step-3 .card-thumb img {
   object-position: center;
   object-fit: scale-down;

blocks/product-finder/product-finder.js

@@ -1,5 +1,6 @@
 import ffetch from '../../scripts/ffetch.js';
 import {
+  createOptimizedPicture,
   decorateIcons, fetchPlaceholders, toClassName,
 } from '../../scripts/lib-franklin.js';
 import {
@@ -280,8 +281,15 @@ async function stepThree(e) {
   const categoryData = categories.find(
     (c) => c.category === originalCategory && c.type === originalType,
   );
+
+  const cardThumbs = list.querySelectorAll('.card-thumb');
+  cardThumbs.forEach((thumb) => {
+    const newTagImage = createOptimizedPicture('/images/new-product-tag.png', 'New Product Tag');
+    newTagImage.classList.add('new-product-tag');
+    thumb.appendChild(newTagImage);
+  });
+
   if (categoryData.displayImage === 'false') {
-    const cardThumbs = list.querySelectorAll('.card-thumb');
     cardThumbs.forEach((thumb) => {
       thumb.style.display = 'none';
     });