Move these styles to CSS

Also clean it up, aspect-ratio + width + height actually not even needed

src/app.css

@@ -829,7 +829,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .carousel::-webkit-scrollbar {
   display: none;
 }
-.carousel > * {
+.carousel .carousel-item {
   scroll-snap-align: center;
   scroll-snap-stop: always;
   flex-shrink: 0;
@@ -847,7 +847,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     transparent 100%
   );
 }
-.carousel > * :is(img, video) {
+.carousel .carousel-item :is(img, video) {
   width: auto;
   max-width: 100%;
   height: auto;
@@ -855,10 +855,24 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   max-height: 100dvh;
   vertical-align: middle;
 }
-.carousel > * video {
+.carousel .carousel-item video {
   min-height: 80px;
   max-height: 80vh; /* prevent other UI elements from obscuring video */
 }
+.carousel .carousel-item .media {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
+    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
+  background-origin: content-box;
+}
 
 .carousel-top-controls {
   top: 0;

src/components/media.jsx

@@ -48,17 +48,6 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
         style={
           showOriginal && {
             backgroundImage: `url(${previewUrl})`,
-            backgroundSize: 'contain',
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-            aspectRatio: `${width}/${height}`,
-            width,
-            height,
-            maxWidth: '100%',
-            maxHeight: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
           }
         }
       >