added video poster, start working on overview, font tweaks for about page

css/main.css

@@ -134,6 +134,7 @@ h2 {
     height: 0;
     padding-bottom: 100%;
 }
+
 .clip {
     overflow: hidden;
 }
@@ -144,6 +145,7 @@ h2 {
     padding: 0 0px 0 0;
     text-align: center;
 }
+
 .center {
     text-align: center;
 }
@@ -156,7 +158,7 @@ h2 {
 }
 
 h3 {
-  font-size: 15px;
+  font-size: 16px;
   line-height: 20px;
 }
 
@@ -165,3 +167,18 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
     margin: 0;
 }
+
+.overview {
+  display: flex;
+}
+
+.small {
+    font-size: 12px;
+    line-height: 20px;
+    letter-spacing: 0;
+}
+
+.dark .quiet {
+    color: #7f7f7f;
+    color: rgba(255,255,255,.5);
+}

css/player.css

@@ -42,6 +42,7 @@
 /* ==== Player CSS ==== */
 video {
   cursor:pointer;
+  object-fit: cover;
 }
 video::-webkit-media-controls-enclosure {
   display: none;

index.html

@@ -30,7 +30,7 @@
 
         <div id="video-container">
           <div class="overlay"></div>
-          <video id="video" width="100%" height="100%">
+          <video id="video" width="100%" height="100%" poster="images/video1_poster.png">
 
             <!-- Video here -->
             <source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">

overview.html

@@ -11,6 +11,16 @@
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
+
+      <section class="overview">
+        <span class="overview_item">
+          <img src="images/video1_poster.png">
+          Titel
+          Beschreibung
+          Länge
+        </span>
+      </section>
+
     </div>
   </body>
 </html>