Video page styling

static/style/video.css

@@ -1,4 +1,4 @@
-.video-container {
+/* .video-container {
     max-width: 600px;
     margin: 0 auto;
 }
@@ -18,4 +18,62 @@ video {
     video {
         max-width: 100%;
     }
+} */
+
+
+/* new stuff */
+
+.media-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    margin-bottom: 1rem;
+}
+
+.media-card {
+    background-color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.media-card h3 {
+    padding: 15px;
+    margin: 0;
+    font-size: 18px;
+    background-color: #f8f8f8;
+}
+
+.audio-container audio {
+    width: 100%;
+}
+
+.video-container video {
+    width: 100%;
+    max-width: 600px;
+    display: block;
+    margin: 0 auto;
+}
+
+.media-download {
+    padding: 15px;
+    text-align: center;
+}
+
+.media-download a {
+    display: inline-block;
+    padding: 10px 15px;
+    background-color: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+}
+
+/* narrower than 600px */
+@media (max-width: 600px) {
+    .media-grid {
+        grid-template-columns: 1fr;
+    }
 }