Mobile responsive thanks ai slop

frontend/app/pages/art/[slug].vue

@@ -55,12 +55,12 @@ useSeo({
         a {
             text-decoration: none;
             color: var(--color-text);
-        }   
+        }
     }
 
     img {
         margin: auto;
-        display: flex;
+        display: block;
         max-height: 77vh;
         max-width: 100%;
     }
@@ -73,39 +73,21 @@ useSeo({
   margin-bottom: 16px;
   line-height: 1.3;
 }
-</style>
 
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>
-
-<style lang="scss">
-.extended-container {
-    width: 100%;
-    margin: auto;
-    margin-top: 32px;
-}
-
-.art {
-    h2 {
-        a {
-            text-decoration: none;
-            color: var(--color-text);
-        }   
+@media screen and (max-width: 600px) {
+    .extended-container {
+        margin-top: 16px;
     }
 
-    img {
-        margin: auto;
-        display: flex;
-        max-height: 77vh;
-        max-width: 100%;
+    .art img {
+        max-height: 50vh;
+    }
+
+    .art-title {
+        font-size: 1.4rem;
     }
 }
-</style>
 
-<style lang="scss">
 .no-sprite .undertable-wrapper {
   display: none;
 }

frontend/app/pages/art/index.vue

@@ -248,18 +248,25 @@ const displayedArt = computed(() => {
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 600px) {
   .section-title {
     font-size: 1rem;
   }
-  
+
   .grid {
-      grid-template-columns: repeat(1, minmax(200px, 1fr));
+      grid-template-columns: 1fr;
       padding: 16px 0;
   }
-  
+
   .selector {
-      height: 180px;
+      height: 200px;
+  }
+}
+
+@media (max-width: 400px) {
+  .section-title {
+    font-size: 1rem;
+    padding-left: 0;
   }
 }
 </style>