cleanup card UI

src/element/stream-cards.css

@@ -4,14 +4,27 @@
 
 @media (min-width: 1020px) {
   .stream-cards {
-    display: flex;
+    display: grid;
     align-items: flex-start;
-    gap: 24px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
     margin-top: 12px;
     flex-wrap: wrap;
   }
 }
 
+@media (min-width: 1600px){
+  .stream-cards {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 2100px){
+  .stream-cards {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 .card-container {
   display: flex;
   flex-direction: column;
@@ -28,12 +41,8 @@
   display: flex;
   align-self: flex-start;
   flex-direction: column;
-  padding: 20px 24px;
   gap: 16px;
-  border-radius: 24px;
-  background: #111;
-  min-width: 210px;
-  max-width: 310px;
+  flex: 1;
 }
 
 .stream-card.image-card {

src/pages/stream-page.css

@@ -12,6 +12,12 @@
   gap: var(--gap-s);
   display: flex;
   flex-direction: column;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.stream-page .video-content::-webkit-scrollbar {
+  display: none;
 }
 
 .stream-page .video-overlay {