ok

src/components/Item.module.css

@@ -39,8 +39,8 @@
 }
 
 .itemImage {
-  width: 119px;
-  height: 129px;
+  width: 100%;
+  height: 100%;
   border-radius: 10px;
   margin-right: 10px;
   object-fit: cover;
@@ -49,16 +49,16 @@
 
 .imageContainer {
   position: relative;
-  width: 119px;
-  height: 129px;
+  width: 26vw;
+  height: 26vw;
 }
 
 .overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 15px;
+  left: 8px;
+  right: 8px;
+  bottom: 15px;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   display: flex;
@@ -67,6 +67,7 @@
   border-radius: 20px;
   cursor: pointer;
   transition: background-color 0.3s ease;
+  font-size: 3.3vw;
 }
 
 .overlay:hover {
@@ -99,7 +100,7 @@
   font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
-  font-size: 1.4rem;
+  font-size: 5vw;
   font-weight: 500;
   margin-top: 0;
   margin: 0 5px;
@@ -128,10 +129,10 @@
   font-style: normal;
   font-weight: 600;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
-  font-size: 0.9rem;
+  font-size: 3.3vw;
   /* margin-bottom: 35px; */
   margin-left: 5px;
-  color: #d9c61c;
+  color: #3a3a3a;
   background-color: transparent;
 }
 
@@ -184,11 +185,11 @@
     border: 2px solid #73a585;
     /* border: none; */
     display: inline-block;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    width: 95px;
-    height: 35px;
+    width: 87px;
+    height: 32px;
     margin-left: 5px;
     margin-top: 5px;
     border-radius: 20px;