ok

src/components/Coupon.css

@@ -3,10 +3,13 @@
     display: flex;
     border: 2px solid #ccc;
     height: 50%;
+    max-height: 140px;
     background-color: #f8f8f8;
     border-radius: 8px;
     font-family: Arial, sans-serif;
     align-items: center;
+    position: relative;
+    margin-bottom: 5px;
   }
   
   /* Left side (with the rotated code and dotted line) */
@@ -22,7 +25,7 @@
   
   .coupon-code {
     writing-mode: vertical-rl;
-    font-size: 18px;
+    font-size: 4vw;
     font-weight: bold;
     color: #333;
     margin: 0;
@@ -42,7 +45,7 @@
     flex-grow: 1;
   }
   .coupon-value {
-    font-size: clamp(18px, 3vw, 24px); /* Minimum 18px, 6vw (responsive), Maximum 24px */
+    font-size: 4vw; /* Minimum 18px, 6vw (responsive), Maximum 24px */
     font-weight: bold;
     color: #2c3e50;
     text-align: left;
@@ -50,7 +53,34 @@
   
   .coupon-period,
   .coupon-expiration {
-    font-size: 14px;
+    font-size: 3vw;
     color: #7f8c8d;
   }
-  
+  
+  
+.RibbonBannerInverted {
+  pointer-events: none;
+  position: absolute;
+  top: -38px;
+  width: 200px;
+  height: 200px;
+  right: -35px;
+  transform: scale(-0.8,0.8);
+}
+
+.RibbonBannerInverted img {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+}
+
+.RibbonBannerInverted h1 {
+  margin: 0; /* Remove default margin */
+  font-size: 20px; /* Adjust font size as needed */
+  transform: rotate(-44.7deg)scale(-1,1); /* Rotate the text */
+  transform-origin: center; /* Rotate around its center */
+  white-space: nowrap; /* Prevent text wrapping */
+  position: absolute;
+  top: 68px;
+  left: -9px;
+}