Responsive?

frontend/app/components/Sprite.vue

@@ -1,8 +1,7 @@
 <template>
 <img ref="sprite" v-show="loaded"
     class="sprite pixelated"
-    :src="props.path" 
-    :width="props.width">
+    :src="props.path">
 </template>
 
 <script setup lang="ts">
@@ -13,8 +12,7 @@ const props = defineProps<{
   top?: string,
   right?: string,
   left?: string,
-  bottom?: string,
-  width: string
+  bottom?: string
 }>();
 
 const sprite = ref(null);
@@ -34,5 +32,14 @@ onMounted(() => {
 .sprite {
     position: absolute;
     z-index: 1;
+    width: 1300px;
+
+    @media screen and (max-width: 900px) {
+        width: 650px;
+    }
+
+    @media screen and (max-width: 1200px) and (min-width: 900px) {
+        width: 975px;
+    }
 }
 </style>

frontend/app/components/parts/TableHeader.vue

@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
                 <HeaderLinks></HeaderLinks>
         </div>
         <div class="undertable">
-            <Sprite :path="spritePath" bottom="-141px" left="-75px" width="1300"></Sprite> 
+            <Sprite :path="spritePath" bottom="-141px" left="-75px"></Sprite> 
         </div>
         <div class="header-container">
             <SiteOptions></SiteOptions>
@@ -71,6 +71,18 @@ onBeforeUnmount(() => {
     margin-left: -425px;
     margin-bottom: 25px;
     user-select: none;
+
+    @media screen and (max-width: 1200px) and (min-width: 900px) {
+        left: -50px;
+        bottom: 20px;
+        margin-top: 350px;
+    }
+
+    @media screen and (max-width: 900px) {
+        left: 70px;
+        bottom: 50px;
+        margin-top: 250px;
+    }
 }
 
 .web-links {