responsive review

pages/busqueda.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="">
+  <div class="page-busqueda">
     <!-- <HeroWithSearch 
         title="Productos y servicios"
         subtitle="Catálogo colectivo de consumo transformador"
@@ -31,7 +31,7 @@
         </div>
       </div>
     </section>
-    <div class="c-container row">
+    <div class="c-container">
       <div class="col-md-3">
         <ProductFilter
         :filters="filters"
@@ -399,19 +399,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-container {
-  contain: content;
+.page-busqueda {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
   width: 100%;
   min-height: 100dvh;
-  margin-bottom: 2rem;
+  justify-content: center;
+  margin: 0 auto;
 }
-
 .hero-section {
   width: 100%;
   @include mobile {
-    margin-top: 12dvh;
+    margin-top: 0.75rem;
   }
 }
+.c-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  width: 100%;
+  min-height: 100dvh;
+  margin-bottom: 2rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0;
+  }
+}
+
 .gradient {
   position: relative;
   display: flex;

pages/index.vue

@@ -126,6 +126,7 @@ export default {
   align-self: center;
   background-image: url('../assets/img/hand-heart.svg');
   background-size: contain;
+  background-position: center;
 
   @include mobile {
     width: 300px;
@@ -139,6 +140,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  text-align: center;
   border-radius: 24px;
   min-height: 85dvh;
   background: linear-gradient(180deg, $color-consumo-base-extra-light, $color-consumo-base);

pages/productoras/[id].vue

@@ -413,12 +413,14 @@ export default {
   img {
     width: 100%;
     height: 100%;
+    border-radius: 16px;
     object-fit: contain;
   }
 
   @include mobile {
-    width: 200px;
-    height: 200px;
+    height: 335px;
+    width: 335px;
+    border-radius: 16px;
     margin: 0 auto;
   }
 }

pages/productoras/index.vue

@@ -28,7 +28,6 @@
         </div>
       </section>
       <div v-if="companyList && companyList.length" class="cards-section">
-        {{ companyList.length }} entidades encontradas
         <section  class="cards-grid">
           <article v-for="(coop, index) in companyList" :key="index">
             <CoopCard :coop="coop" />
@@ -134,6 +133,10 @@ export default {
       width: 100%;
       padding: 4rem;
       
+      @media (max-width: 768px) {
+        padding: 2rem;
+        width: 100%;
+      }
 
       // responsive breakpoints
       grid-template-columns: 1fr;