fix: fix image dimensions and positioning for all sizes (#183)

Author: ElisavetAmpatzidou

clips/popup-banner/clip/clip.css

@@ -200,6 +200,12 @@
   stroke: var(--cta-color);
 }
 
+.product-image-container{
+  width:100%;
+  height: 100%;
+  position: absolute;
+}
+
 .products .product-image {
   width: 450px;
   height: 450px;
@@ -209,8 +215,10 @@
   object-position: center;
 }
 
-.shape {
-  margin-left: 50px;
+.product-image.shape {
+  width: 395px;
+  height: 395px;
+  margin-left: 40px;
   clip-path: path(
     "M272.509 2.45703C310.974 -3.41633 341.724 14.4616 363.099 48.0117C384.488 81.5846 396.463 130.828 397.282 187.527C398.101 244.182 381.427 295.694 350.419 333.238C319.659 370.482 274.773 394.005 218.783 395.17L217.459 395.192C206.459 395.351 194.839 391.522 183.156 385.128C171.477 378.735 159.765 369.796 148.593 359.778C127.643 340.994 108.63 318.457 95.3154 301.914L92.7295 298.688C86.0205 290.288 76.7017 280.953 66.6572 270.767C56.6035 260.571 45.8087 249.508 36.1084 237.622C17.0006 214.209 2.2184 187.697 5.65723 158.463L5.83496 157.068C13.134 103.842 33.8317 76.5112 61.5146 60.2256C75.377 52.0705 91.0139 46.6714 107.651 42.1934C123.274 37.9884 139.686 34.6169 156.377 30.5195L159.719 29.6904C204.716 18.389 232.652 8.71432 270.69 2.73828L272.509 2.45703Z"
   );
@@ -293,14 +301,16 @@
   }
 
   .products .product-image {
-    width: 230px;
-    height: 230px;
+    width: 278px;
+    height: 232px;
     top: 5px;
+    margin-left: 36px;
   }
 
-  .shape {
-    top: 0;
-    margin-left: 0px;
+  .product-image.shape {
+    width: 230px;
+    height: 230px;
+    margin-left: 55px;
     clip-path: path(
       "M230.12 108.708C231.068 174.306 191.511 228.066 125.913 229.014C100.213 229.385 69.0626 192.494 53.6009 173.135C38.1392 153.775 -1.43181 125.746 3.32315 91.0711C11.7792 29.4067 51.332 27.5488 92.4703 17.2165C118.861 10.5882 135.138 4.91457 157.68 1.47267C202.414 -5.35786 229.172 43.1109 230.12 108.708Z"
     );
@@ -430,11 +440,14 @@
   .products .product-image {
     width: 200px;
     height: 150px;
-    top: 2px;
+    top: 0px;
   }
 
-  .shape {
+  .product-image.shape {
+    width: 177px;
+    height: 170px;
     margin-left: 15px;
+    top: 2px;
     clip-path: path(
       "M174.052 69.2385C174.656 111.032 144.548 145.354 94.7767 146.074C75.2767 146.356 51.7072 122.906 40.0101 110.598C28.3131 98.2897 -1.6609 80.5008 2.00772 58.3996C8.53188 19.0956 38.5446 17.8423 69.7751 11.1868C89.8098 6.91723 102.17 3.27366 119.278 1.04105C153.231 -3.38963 173.447 27.445 174.052 69.2385Z"
     );
@@ -605,11 +618,13 @@
     top: 0px;
   }
 
-  .shape {
-    top: 11px !important;
-    margin-left: 20px;
+  .product-image.shape {
+    top: 9px;
+    margin-left: 8px;   
+    width: 86px;
+    height: 86px;
     clip-path: path(
-      "M80.9442 32.7766C81.2322 52.7026 67.2358 69.0616 44.0883 69.3962C35.0194 69.5273 24.0538 58.3429 18.6117 52.4728C13.1696 46.6028 -0.773605 38.1165 0.928846 27.5799C3.95643 8.84196 17.9144 8.24951 32.4379 5.08164C41.7548 3.04942 47.5025 1.31436 55.459 0.252805C71.2487 -1.85387 80.6562 12.8506 80.9442 32.7766Z"
+      "M84.3386 35.0859C84.6409 55.997 70.192 73.1612 46.29 73.5067C36.9254 73.6421 25.5996 61.9022 19.9786 55.7406C14.3577 49.5791 -0.0421655 40.6699 1.71323 29.6128C4.83496 9.94936 19.2479 9.33103 34.2441 6.01009C43.8643 3.87968 49.7989 2.06025 58.0146 0.948155C74.3186 -1.25882 84.0363 14.1748 84.3386 35.0859Z"
     );
   }
 

clips/popup-banner/clip/clip.html

@@ -105,30 +105,31 @@
       <div class="product">
         <picture
           mc-if="initParams.imageClipPath == false"
-          class="product-image"
+          class="product-image-container"
         >
           <source
             mc-for="imgKey,imgItem"
             mc-of="item.featured_image"
             mc-if="{{imgKey}}!='default'"
             srcset="{{imgItem}}"
             media="{{imgKey}}"
-            class="product-image"
           />
           <img
             src="{{item.featured_image.default}}"
             alt="product"
             class="product-image"
           />
         </picture>
-        <picture mc-if="initParams.imageClipPath == true" class="product-image">
+        <picture
+          mc-if="initParams.imageClipPath == true"
+          class="product-image-container"
+        >
           <source
             mc-for="imgKey,imgItem"
             mc-of="item.featured_image"
             mc-if="{{imgKey}}!='default'"
             srcset="{{imgItem}}"
             media="{{imgKey}}"
-            class="shape product-image"
           />
           <img
             src="{{item.featured_image.default}}"