fix: update TabItem styles for responsive design using SCSS mixins

Author: preschian

components/shared/TabItem.vue

@@ -56,14 +56,23 @@ const icon = computed(() =>
 </script>
 
 <style scoped lang="scss">
+@import '@/assets/styles/abstracts/mixins';
+
 .control:not(:last-of-type) .explore-tabs-button {
   border-right: none;
 }
 
 .control,
 .explore-tabs-button {
   width: 15rem;
-  @apply bulma-until-widescreen:w-48 bulma-mobile:w-full;
+
+  @include bulma-mobile {
+    width: 100% !important;
+  }
+
+  @include bulma-until-widescreen {
+    width: 12rem;
+  }
 }
 
 .full-width {