From d2774e815011b210205e8e3e9995265cc5b7a929 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 1 Sep 2023 13:06:40 +0200
Subject: [PATCH] refactor: update vite-imagetools asset link directives

Starting with v5 vite-imagetools has removed shorthands
---
 src/App.vue                      |   6 +-
 src/components/WelcomeHeader.vue |   6 +-
 src/views/AbilitiesView.vue      |  24 ++++----
 src/views/AnatomyView.vue        | 102 +++++++++++++++----------------
 src/views/ClothingView.vue       |  36 +++++------
 src/views/OverdriveView.vue      |   6 +-
 6 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a560e53..0e93aa4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -62,21 +62,21 @@ provide(showModalKey, showModal)
     <picture>
       <source
         srcset="
-          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&avif&quality=75&srcset
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=avif&quality=75&as=srcset
         "
         sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         type="image/avif"
       />
       <source
         srcset="
-          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&webp&quality=100&srcset
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=webp&quality=100&as=srcset
         "
         sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         type="image/webp"
       />
       <img
         class="nav-logo"
-        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&png&srcset"
+        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=png&as=srcset"
         sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         alt="Sebin Avatar"
       />
diff --git a/src/components/WelcomeHeader.vue b/src/components/WelcomeHeader.vue
index 52f6ce3..a870d50 100644
--- a/src/components/WelcomeHeader.vue
+++ b/src/components/WelcomeHeader.vue
@@ -5,21 +5,21 @@
       <picture>
         <source
           srcset="
-            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&avif&quality=75&withoutEnlargement&srcset
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&webp&quality=100&withoutEnlargement&srcset
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&png&withoutEnlargement&srcset
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
           alt="Sebin Avatar"
diff --git a/src/views/AbilitiesView.vue b/src/views/AbilitiesView.vue
index 654d962..4ea42bd 100644
--- a/src/views/AbilitiesView.vue
+++ b/src/views/AbilitiesView.vue
@@ -24,21 +24,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Fire Breath"
@@ -61,21 +61,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Fire Breath"
@@ -98,21 +98,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Kindled Fist"
@@ -134,21 +134,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Burning Twister"
diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index 1fb3485..a1a6588 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -47,7 +47,7 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture v-if="isNsfw">
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -61,7 +61,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -75,7 +75,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <img
           srcset="
-            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -92,7 +92,7 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture v-else>
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -106,7 +106,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -120,7 +120,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <img
           srcset="
-            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -213,7 +213,7 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture>
         <source
           srcset="
-            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -227,7 +227,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <source
           srcset="
-            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -241,7 +241,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <img
           srcset="
-            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&png&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -321,21 +321,21 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture>
         <source
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=jpg&quality=95&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           alt="Sebin's upper body closeup"
@@ -368,21 +368,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             alt="Sebin flexing"
@@ -401,21 +401,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin beckons"
@@ -434,21 +434,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             alt="Sebin jamming out to some tunes"
@@ -467,21 +467,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin flexing"
@@ -500,21 +500,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             alt="Sebin soaping up"
@@ -533,21 +533,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             alt="Sebin bulging out"
@@ -566,21 +566,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             alt="Sebin showing you his rings"
@@ -599,21 +599,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 995px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
             alt="Sebin ready to throw down"
@@ -632,21 +632,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
             alt="Sebin looking aloof (but chill)"
@@ -665,21 +665,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             alt="Sebin getting out of the pool"
@@ -698,21 +698,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             alt="Sebin getting frisky on the train"
@@ -731,21 +731,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&png&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             alt="Sebin getting ready to lift"
@@ -770,17 +770,17 @@ const showModal = inject<Function>(showModalKey, Function)
       <template #img>
         <picture>
           <source
-            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&avif&quality=75&srcset"
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=avif&quality=75&as=srcset"
             sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
             type="image/avif"
           />
           <source
-            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&webp&quality=100&srcset"
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=webp&quality=100&as=srcset"
             sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
             type="image/webp"
           />
           <img
-            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&png&srcset"
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=png&as=srcset"
             sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
             alt="Sebin's manly parts"
             loading="lazy"
diff --git a/src/views/ClothingView.vue b/src/views/ClothingView.vue
index e258353..81c267c 100644
--- a/src/views/ClothingView.vue
+++ b/src/views/ClothingView.vue
@@ -15,21 +15,21 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&png&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             alt="Sebin in his casual outfit"
@@ -51,19 +51,19 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=jpg&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
             alt="Sebin in his cold weather outfit"
@@ -85,19 +85,19 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=jpg&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
             alt="Sebin in his workout outfit (fullbody)"
@@ -119,19 +119,19 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500x, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=jpg&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin in his workout outfit (close-up)"
@@ -153,21 +153,21 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             alt="Tracksuit pants"
@@ -189,21 +189,21 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&avif&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&format=avif&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&webp&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&format=webp&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             alt="Shorts"
diff --git a/src/views/OverdriveView.vue b/src/views/OverdriveView.vue
index 5f5bbfc..c9bbb65 100644
--- a/src/views/OverdriveView.vue
+++ b/src/views/OverdriveView.vue
@@ -15,21 +15,21 @@ import RefFigure from '@/components/RefFigure.vue'
       <picture>
         <source
           srcset="
-            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&jpg&quality=95&withoutEnlargement&srcset
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=jpg&quality=95&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
           alt="Sebin in Overdrive"