feat: improved image optimization

src/assets/styles/index.css

@@ -403,17 +403,8 @@ li {
 .image__banner {
   border: 1px solid var(--accent-color);
   border-radius: var(--rounded-lg);
-  overflow: hidden;
-}
-
-.image__banner,
-.image__banner > * {
-  display: block;
-  width: 100%;
-}
-
-.image__banner > * {
   height: auto;
+  width: 100%;
 }
 
 /* pages */

src/assets/styles/pages/about.css

@@ -4,30 +4,18 @@
 
 .avatar__wrapper {
   width: 100%;
-  margin-bottom: 1.5rem;
+  justify-content: center;
 }
 
-.avatar__wrapper .avatar__wrapper--interior {
+.avatar__wrapper img {
+  border-radius: var(--rounded-full);
+  border: 1px solid var(--accent-color);
   width: var(--avatar-size);
   height: var(--avatar-size);
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-full);
-  display: flex;
   padding: 1rem;
   background-color: var(--color-lightest);
 }
 
-.avatar__wrapper,
-.avatar__wrapper .avatar__wrapper--interior {
-  justify-content: center;
-  overflow: hidden;
-}
-
-.avatar__wrapper .avatar__wrapper--interior > * {
-  width: 100%;
-  height: 100%;
-}
-
 @media screen and (min-width: 768px) {
   :root {
     --avatar-size: 24rem;

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

@@ -76,8 +76,7 @@
   font-weight: 700;
 }
 
-.media__grid .item__image,
-.media__grid .item__image > * {
+.media__grid img {
   width: 100%;
   height: 100%;
 }