testing for smaller screens

Author: Paulie-Aditya

assets/sass/layout.scss

@@ -69,12 +69,12 @@ aside {
   @include border-radius(5px);
 
   .video-grid {
-    padding: 1rem 0;
+    padding: 1rem;
 
     .video-thumbnails {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 2rem;
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+      gap: 1rem;
       list-style: none;
       padding: 0;
       margin: 0;
@@ -87,6 +87,10 @@ aside {
       color: inherit;
       height: 100%;
       transition: transform 0.2s ease;
+      background: #fff;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
       &:hover {
         transform: translateY(-3px);
@@ -95,6 +99,7 @@ aside {
       img {
         width: 100%;
         height: auto;
+        aspect-ratio: 16/9;
         object-fit: cover;
       }