feat: refactor image loading

src/assets/styles/components/media-grid.css

@@ -28,7 +28,7 @@
   & .item-wrapper {
     position: relative;
 
-    &.shadow picture::after {
+    &.shadow image::after {
       position: absolute;
       z-index: 1;
       content: '';
@@ -39,7 +39,7 @@
       height: calc(100% - 1px);
     }
 
-    & picture {
+    & image {
       width: 100%;
       height: 100%;
       position: relative;

src/assets/styles/components/music-chart.css

@@ -15,8 +15,7 @@
       border: 1px solid var(--accent-color);
     }
 
-    & img,
-    & picture {
+    & img {
       width: calc(var(--sizing-3xl) * 1.5);
       height: calc(var(--sizing-3xl) * 1.5);
     }
@@ -117,12 +116,9 @@
     &.grid {
       grid-template-columns: repeat(3,minmax(0,1fr));
 
-      & .item {
-        & img,
-        & picture {
-          width: calc(var(--sizing-3xl) * 2);
-          height: calc(var(--sizing-3xl) * 2);
-        }
+      & .item img {
+        width: calc(var(--sizing-3xl) * 2);
+        height: calc(var(--sizing-3xl) * 2);
       }
     }
   }

src/assets/styles/pages/about.css

@@ -19,7 +19,6 @@
     justify-content: center;
     overflow: hidden;
 
-    & picture > *,
     & img {
       width: 100%;
       height: 100%;

src/assets/styles/pages/books.css

@@ -22,8 +22,7 @@
     border-color: var(--accent-color-hover)
   }
 
-  & img,
-  & picture {
+  & img {
     max-width: calc(var(--sizing-3xl) * 4);
     height: auto;
   }
@@ -68,11 +67,6 @@
     gap: var(--sizing-base);
     align-items: start;
 
-    & picture {
-      display: block;
-      margin-bottom: var(--sizing-md);
-    }
-
     & .book-meta {
       align-items: start;
     }