Improve CSS of flex items on channel preview

packages/joy-media/src/common/index.css

@@ -266,6 +266,7 @@ $borderColor: #e4e4e4;
 
 .ChannelPreview {
   display: flex;
+  align-items: center;
 
   .ListOfChannels & {
     margin-bottom: 1rem;
@@ -282,30 +283,38 @@ $borderColor: #e4e4e4;
   .ChannelTitle {
     font-size: 1.5rem;
     font-weight: 500;
-    margin-top: .75rem;
-    margin-bottom: .5rem;
+    margin: 0;
 
     .ChannelHeader & {
       margin-top: 1rem;
     }
   }
-  &.big .ChannelTitle {
-    font-size: 2rem;
-  }
-  &.small .ChannelTitle {
-    font-size: 1rem;
-    a {
-      color: $blackFont;
+  
+  &.small {
+    .ChannelTitle {
+      font-size: 1rem;
+      a {
+        color: $blackFont;
+      }
+    }
+    .ChannelAvatar {
+      margin-right: .5rem;
     }
   }
-  &.small .ChannelAvatar {
-    margin-right: .5rem;
+
+  &.big {
+    align-items: normal;
+
+    .ChannelTitle {
+      font-size: 2rem;
+    }
   }
 
   .ChannelSubtitle {
     color: $grayFont;
     font-size: .9rem;
     text-transform: uppercase;
+    margin-top: .5rem;
 
     .icon {
       margin-right: .5rem;