✨ chore: Add media queries for responsiveness

- Adjusted card dimensions for tablet and mobile screens
- Preserved hover effects and adjusted image proportions
- Ensured content visibility and alignment on smaller screens

style.css

@@ -142,4 +142,94 @@ body {
     padding-left: 12px;
     padding-right: 12px;
   }
+
+  .card {
+    width: 250px;
+    height: 300px;
+  }
+
+  .card:hover {
+    width: 500px;
+  }
+
+  .card .circle::before {
+    width: 300px;
+    height: 300px;
+  }
+
+  .card:hover .circle::before {
+    width: 100%;
+    height: 100%;
+  }
+
+  .card .circle .logo {
+    width: 200px;
+  }
+
+  .card .product_img {
+    height: 250px;
+  }
+
+  .card:hover .product_img {
+    height: 450px;
+  }
+
+  .card .content {
+    width: 60%;
+    left: 10%;
+  }
+
+  .card:hover .content {
+    left: 10px;
+  }
+
+  .card .content h2 {
+    font-size: 2em;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .card {
+    width: 200px;
+    height: 250px;
+  }
+
+  .card:hover {
+    width: 400px;
+  }
+
+  .card .circle::before {
+    width: 250px;
+    height: 250px;
+  }
+
+  .card:hover .circle::before {
+    width: 100%;
+    height: 100%;
+  }
+
+  .card .circle .logo {
+    width: 150px;
+  }
+
+  .card .product_img {
+    height: 200px;
+  }
+
+  .card:hover .product_img {
+    height: 350px;
+  }
+
+  .card .content {
+    width: 70%;
+    left: 5%;
+  }
+
+  .card:hover .content {
+    left: 5px;
+  }
+
+  .card .content h2 {
+    font-size: 1.5em;
+  }
 }