Fix text alignment in small card

It's confusing when status can be small/large and card can small/large too

src/components/status.css

@@ -461,7 +461,7 @@
   background-color: var(--bg-color);
   max-height: 160px;
 }
-.status.large .card.link.large {
+.status.large .card.link {
   border-radius: 16px;
   flex-direction: column;
   max-height: none;
@@ -493,7 +493,7 @@
   flex-grow: 1;
   align-self: center;
 }
-.card.large .meta-container {
+.status.large .card.link.large .meta-container {
   align-self: flex-start;
 }
 .card .title {

src/components/status.jsx

@@ -436,12 +436,7 @@ function Status({
             !sensitive &&
             !spoilerText &&
             !poll &&
-            !mediaAttachments.length && (
-              <Card
-                card={card}
-                size={!poll && !mediaAttachments.length ? 'l' : 'm'}
-              />
-            )}
+            !mediaAttachments.length && <Card card={card} />}
         </div>
         {size === 'l' && (
           <>
@@ -851,7 +846,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
   }
 }
 
-function Card({ card, size }) {
+function Card({ card }) {
   const {
     blurhash,
     title,
@@ -876,7 +871,7 @@ function Card({ card, size }) {
 
   const hasText = title || providerName || authorName;
   const isLandscape = width / height >= 1.2;
-  size = size === 'l' && isLandscape ? 'large' : '';
+  const size = isLandscape ? 'large' : '';
 
   if (hasText && image) {
     const domain = new URL(url).hostname.replace(/^www\./, '');