amend some style issues

components/ProductCardDetails.vue

@@ -45,27 +45,27 @@
             <img class="div-link-img" src="@/assets/img/shopping-bag-white.svg" />
             COMPRA EN SU TIENDA
           </BButton>
+          <p class="share-text">Comparte:</p>
           <div class="smlogos_container">
-            <p class="share-text">Comparte:</p>
             <div class="smlogo_container">
               <a @click="shareFacebook">
                 <img
                   alt="facebook logo"
                   class="smlogo_img"
-                  src="@/assets/img/latienda-smlogo-facebook.svg"
+                  src="@/assets/img/consumo-smlogo-facebook.svg"
                 />
               </a>
             </div>
             <a :href="shareTwitter()">
               <div class="smlogo_container">
                 <img
-                  alt="twitter logo"
+                  alt="instagram logo"
                   class="smlogo_img"
-                  src="@/assets/img/latienda-smlogo-twitter.svg"
+                  src="@/assets/img/consumo-smlogo-instagram.svg"
                 />
               </div>
             </a>
-            <a
+            <!-- <a
               :href="shareWhatsApp()"
               data-action="share/whatsapp/share"
               target="_blank"
@@ -78,7 +78,7 @@
                   src="@/assets/img/latienda-smlogo-whatsapp.svg"
                 />
               </div>
-            </a>
+            </a> -->
           </div>
           <div class="coop_info">
             <p class="share-text">Vendido por:</p>
@@ -335,7 +335,8 @@ export default {
   img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
+    border-radius: 16px;
   }
 
   @include mobile {
@@ -445,19 +446,32 @@ export default {
   padding-bottom: 0.5em;
 }
 
+.smlogos_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
+  margin-top: 0.5rem;
+}
+
 .smlogo_container {
   cursor: pointer;
   display: inline-block;
   margin-bottom: 0.5rem;
-
+  border: 1px solid $color-button;
+  border-radius: 100%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .smlogo_img {
     cursor: pointer;
-    width: 40px;
     fill: $color-button;
   }
-  img:hover {
-    transform: scale(1.1);
-    transition: all 0.2s ease;
+  &:hover {
+    background-color: $color-button-hover;
   }
 }