src/api/app/static/css/root.css

@@ -37,21 +37,21 @@ video {
     scroll-margin-top: 60px;
 }
 
-@media only screen and (max-width: 619px)
+@media only screen and (max-width: 600px)
 {
     .gallery {
         display: grid;
         grid-gap: 3px;
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     }
 }
 
-@media only screen and (min-width: 620px) and (max-width: 1199px)
+@media only screen and (min-width: 600px)
 {
     .gallery {
         display: grid;
         grid-gap: 5px;
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     }
 }
 

src/api/app/templates/index.html

@@ -230,6 +230,7 @@ document.addEventListener('DOMContentLoaded', () => {
                   <img src="{{ url_for('thumb_route', thumb_file=thumbnail) }}" alt="{{ thumbnail }}">
                   <div class="overlay">
                     <div class="overlay-content">
+                      <h3>Play</h3>
                       <p>{{ thumbnail[:-4] }}</p>
                   </div>
               </div>