popular section mobile responsive

index.html

@@ -53,12 +53,12 @@ <h1>Start your Journey as Influencer</h1>
 
     <main>
       <!-- Partners section -->
-      <div class="container partners hide">
+      <div class="container partners">
         <img src="images/partners.png" alt="" />
       </div>
 
       <!-- Popular section -->
-      <div class="container popular hide">
+      <div class="container popular">
         <h1>Popular Collection</h1>
         <p class="description">
           Explore our most popular camera accessories, handpicked for their
@@ -219,7 +219,7 @@ <h2>Microphone</h2>
       </div>
 
       <!-- Featured section -->
-      <div class="container featured hide">
+      <div class="container featured">
         <div class="featured-image-container">
           <img src="images/gear.png" alt="" />
         </div>
@@ -236,7 +236,7 @@ <h1>Featured products at one place</h1>
     </main>
 
     <!-- Footer section -->
-    <footer class="hide">
+    <footer class="">
       <div class="container text-container">
         <h3>Shutter Shop</h3>
         <p>Copyright &copy; 2024 Shutter Shop</p>

styles/gears.css

@@ -350,7 +350,6 @@ footer .social i {
 
   .nav-bar {
     padding-top: 2rem;
-    border: 2px solid red;
   }
 
   /* Banner section */
@@ -377,7 +376,7 @@ footer .social i {
     top: 40px;
   }
 
-  .banner .text-content{
+  .banner .text-content {
     width: 100%;
     justify-content: center;
   }
@@ -395,8 +394,30 @@ footer .social i {
     font-weight: 500;
   }
 
-  .banner button{
+  .banner button {
     width: 60%;
     margin: 0 auto;
   }
+
+  /* Partners */
+  .partners {
+    display: none;
+  }
+
+  /* Popular */
+  .popular {
+    width: 90%;
+  }
+
+  .popular .description {
+    width: 90%;
+  }
+
+  .card-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .card:hover {
+    transform: scale(1.02);
+  }
 }