New PR for margins in stable - fixes #9651 (#9982)

* made style change for pet item class to have more margins.

* made style change for pet item class to have more margins.

* files got added

* encapsulated the items as stated in #9903

* #9903 moved the css to stable -> petitem.vue for better encapsulation.

* saving pngs

* update on files

* updated files as requested in PR!

* Revert "saving pngs"

This reverts commit a38ea664e1.

* made css changes just to pet slot

* #9982 removed redundant css

* #9982 applied scss to mount slots as well.

* #9982 refactored scss to be in one place.

* #9982 changed selector

website/client/assets/scss/item.scss

@@ -19,6 +19,10 @@
   margin-bottom: 8px;
 }
 
+.item.pet-slot {
+  margin: 0 2px;
+}
+
 .item {
   position: relative;
   width: 94px;

website/client/components/inventory/stable/mountItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 div
   .item-wrapper(@click="click()", :id="itemId")
-    .item(
+    .item.pet-slot(
       :class="{'item-empty': emptyItem}",
     )
       slot(name="itemBadge", :item="item")

website/client/components/inventory/stable/petItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 div
   .item-wrapper(@click="click()", :id="itemId")
-    .item(
+    .item.pet-slot(
       :class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
     )
       slot(name="itemBadge", :item="item")