diff --git a/resources/js/components/ProductoCard.vue b/resources/js/components/ProductoCard.vue
index 1ff21b5..d22d649 100644
--- a/resources/js/components/ProductoCard.vue
+++ b/resources/js/components/ProductoCard.vue
@@ -46,10 +46,10 @@ export default {
 </script>
 
 <template>
-    <div class="block column min-width">
+    <div class="block column is-one-quarter-desktop is-full-mobile is-half-tablet min-width-from-desktop">
         <div class="box" style="height:100%">
             <div class="columns">
-                <div class="column is-three-quarters">
+                <div class="column">
                     <p class="title is-6">
                         {{ producto.nombre }}
                     </p>
@@ -102,9 +102,18 @@ export default {
 <style lang="scss" scoped>
 @use "bulma/sass/utilities/mixins";
 
-@include mixins.desktop {
-    .min-width {
+@include mixins.until(mixins.$desktop) {
+    .hidden-until-desktop {
+        display: none;
+    }
+}
+
+@include mixins.from(mixins.$desktop) {
+    .min-width-from-desktop {
         min-width: 25rem;
     }
+    .hidden-from-desktop {
+        display: none;
+    }
 }
 </style>