Implement mixed-media tweet support

Fixes #697 #1101

src/sass/tweet/embed.scss

@@ -11,7 +11,7 @@
     left: 0%;
   }
 
-  .video-container {
+  .gallery-video > .attachment {
     max-height: unset;
   }
 }

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;

src/sass/tweet/quote.scss

@@ -95,7 +95,7 @@
     justify-content: center;
   }
 
-  .gallery-gif .attachment {
+  .media-gif > .attachment {
     display: flex;
     justify-content: center;
     background-color: var(--bg_color);
@@ -108,8 +108,9 @@
     }
   }
 
-  .gallery-video,
-  .gallery-gif {
+  .gallery-row .attachment,
+  .gallery-row .attachment > video,
+  .gallery-row .attachment > img {
     max-height: 300px;
   }
 

src/sass/tweet/video.scss

@@ -9,22 +9,22 @@ video {
 .gallery-video {
   display: flex;
   overflow: hidden;
-}
+  
+  &.card-container {
+    flex-direction: column;
+    width: 100%;
+  }
 
-.gallery-video.card-container {
-  flex-direction: column;
-  width: 100%;
-}
+  > .attachment {
+    min-height: 80px;
+    min-width: 200px;
+    max-height: 530px;
+    margin: 0;
 
-.video-container {
-  min-height: 80px;
-  min-width: 200px;
-  max-height: 530px;
-  margin: 0;
-
-  img {
-    max-height: 100%;
-    max-width: 100%;
+    img {
+      max-height: 100%;
+      max-width: 100%;
+    }
   }
 }