Better video list formatting

static/style/videos.css

@@ -1,15 +1,49 @@
-table {
-    width: 100%;
-    border-collapse: collapse;
+.video-list {
+    display: grid;
+    /* each col is at least 300px, but can grow to 100% wide */
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
 }
 
-th,
-td {
+.video-card {
     border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
+    border-radius: 8px;
+    padding: 15px;
+    background-color: #f9f9f9;
 }
 
-th {
-    background-color: #f2f2f2;
+.video-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.video-info {
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.video-options {
+    margin-top: 10px;
+}
+
+.video-options button {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin-right: 5px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+/* narrower than 600px */
+@media (max-width: 600px) {
+    .video-list {
+        grid-template-columns: 1fr;
+    }
 }