Implement mixed-media tweet support

Fixes #697 #1101

src/sass/tweet/media.scss

@@ -10,9 +10,47 @@
   max-width: 533px;
   pointer-events: all;
 
-  .still-image {
-    width: 100%;
-    align-self: center;
+  &.mixed-row {
+    .attachment {
+      min-width: 0;
+      min-height: 0;
+      flex: 1 1 0;
+      max-height: 379.5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #101010;
+    }
+
+    .still-image,
+    .still-image img,
+    .attachment > video,
+    .attachment > img {
+      width: 100%;
+      height: 100%;
+      max-width: none;
+      max-height: none;
+    }
+
+    .still-image {
+      display: flex;
+      align-self: stretch;
+    }
+
+    .still-image img {
+      flex-basis: auto;
+      flex-grow: 0;
+      object-fit: cover;
+    }
+
+    .attachment > video,
+    .attachment > img {
+      object-fit: cover;
+    }
+
+    .attachment > video {
+      object-fit: contain;
+    }
   }
 }
 
@@ -28,10 +66,6 @@
   background-color: var(--bg_color);
   align-items: center;
   pointer-events: all;
-
-  .image-attachment {
-    width: 100%;
-  }
 }
 
 .attachment {
@@ -49,7 +83,14 @@
   }
 }
 
-.gallery-gif video {
+.media-gif {
+  display: table;
+  background-color: unset;
+  width: unset;
+  max-height: unset;
+}
+
+.media-gif video {
   max-height: 530px;
   background-color: #101010;
 }
@@ -96,22 +137,6 @@
   transition-property: max-height;
 }
 
-.image {
-  display: flex;
-}
-
-// .single-image {
-//     display: inline-block;
-//     width: 100%;
-//     max-height: 600px;
-
-//     .attachments {
-//         width: unset;
-//         max-height: unset;
-//         display: inherit;
-//     }
-// }
-
 .overlay-circle {
   border-radius: 50%;
   background-color: var(--dark_grey);
@@ -133,12 +158,6 @@
   margin-left: 14px;
 }
 
-.media-gif {
-  display: table;
-  background-color: unset;
-  width: unset;
-}
-
 .media-body {
   flex: 1;
   padding: 0;