diff --git a/src/components/utilities/inventory/Inventory.vue b/src/components/utilities/inventory/Inventory.vue
index 36be267..63bafdb 100644
--- a/src/components/utilities/inventory/Inventory.vue
+++ b/src/components/utilities/inventory/Inventory.vue
@@ -2,7 +2,7 @@
     <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
         <div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
             <div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
-                <div class="w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
+                <div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
                     <div class="h-full flex flex-col justify-center items-center">
                         <h3 class="mt-4">Ethereal</h3>
                         <img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
diff --git a/tailwind.config.js b/tailwind.config.js
index e28975e..813b7fd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,20 @@ export default {
       '30px': '30px'
     },
     screens: {
+      'sm': '640px',
+      // => @media (min-width: 640px) { ... }
+
+      'md': '768px',
+      // => @media (min-width: 768px) { ... }
+
+      'lg': '1024px',
+      // => @media (min-width: 1024px) { ... }
+
       'xl': '1200px',
+      // => @media (min-width: 1280px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
     },
     extend: {
       inset: {