From c01cff5930e67f0cbcda2e557f3e0eb63e50b94a Mon Sep 17 00:00:00 2001
From: Paulie-Aditya <paul.aditya304@gmail.com>
Date: Fri, 19 Sep 2025 18:54:57 +0530
Subject: [PATCH 1/5] fixed: ordering of videos has been fixed at: /videos to
 show episodes 1 and 3 on the left column, and 2 and 4 on the right column

---
 layouts/shortcodes/videos.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/shortcodes/videos.html b/layouts/shortcodes/videos.html
index f5ecfb52ea..1848d6eca7 100644
--- a/layouts/shortcodes/videos.html
+++ b/layouts/shortcodes/videos.html
@@ -11,7 +11,7 @@
   <ul class="video-thumbnails">
     {{ range $i, $video := $videos }}
     {{ $group := mod $i 2 }}
-    {{ if eq $group 1 }}
+    {{ if eq $group 0 }}
       <li>
       <a href="{{ relURL "video" }}/{{ $video.Params.link }}"><img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}></a>
       <h4>
@@ -29,7 +29,7 @@ <h4>
   <ul class="video-thumbnails">
     {{ range $i, $video := $videos }}
     {{ $group := mod $i 2 }}
-    {{ if eq $group 0 }}
+    {{ if eq $group 1 }}
       <li>
       <a href="{{ relURL "video" }}/{{ $video.Params.link }}"><img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}></a>
       <h4>

From dbbfa3594f70c6974ffe37778a496f19b5877869 Mon Sep 17 00:00:00 2001
From: Paulie-Aditya <paul.aditya304@gmail.com>
Date: Fri, 26 Sep 2025 23:10:38 +0530
Subject: [PATCH 2/5] replacing two column approach with video grid

---
 assets/sass/layout.scss        | 44 ++++++++++++++++++++++++-------
 layouts/shortcodes/videos.html | 47 ++++++++++------------------------
 2 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index ee5842f40b..51ccef90de 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -68,17 +68,43 @@ aside {
   border: solid 1px var(--main-border);
   @include border-radius(5px);
 
-  .two-column {
-    @include clearfix;
-
-    .column-left {
-      width: 47%;
-      float: left;
+  .video-grid {
+    padding: 1rem 0;
+
+    .video-thumbnails {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      list-style: none;
+      padding: 0;
+      margin: 0;
     }
 
-    .column-right {
-      width: 47%;
-      float: right;
+    .video-card {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+      color: inherit;
+      height: 100%;
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: translateY(-3px);
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+      }
+
+      h4 {
+        margin: 0.75rem 0;
+      }
+
+      .description {
+        margin-top: auto;
+      }
     }
   }
 
diff --git a/layouts/shortcodes/videos.html b/layouts/shortcodes/videos.html
index 1848d6eca7..0d8092b4ba 100644
--- a/layouts/shortcodes/videos.html
+++ b/layouts/shortcodes/videos.html
@@ -6,41 +6,20 @@
 {{ $dimensions = .Get "dimensions" }}
 {{ end }}
 
-<div class="two-column">
-  <div class="column-left">
+<div class="video-grid">
   <ul class="video-thumbnails">
-    {{ range $i, $video := $videos }}
-    {{ $group := mod $i 2 }}
-    {{ if eq $group 0 }}
-      <li>
-      <a href="{{ relURL "video" }}/{{ $video.Params.link }}"><img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}></a>
-      <h4>
-        <a href="{{ relURL "video" }}/{{ $video.Params.link }}">{{ $video.Params.video_title }}</a>
-      </h4>
-      <p class="description">
-        <strong>Length:</strong> {{ $video.Params.length }}
-      </p>
-      </li>
-    {{ end }}
-    {{ end }}
-  </ul>
-  </div>
-  <div class="column-right">
-  <ul class="video-thumbnails">
-    {{ range $i, $video := $videos }}
-    {{ $group := mod $i 2 }}
-    {{ if eq $group 1 }}
-      <li>
-      <a href="{{ relURL "video" }}/{{ $video.Params.link }}"><img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}></a>
-      <h4>
-        <a href="{{ relURL "video" }}/{{ $video.Params.link }}">{{ $video.Params.video_title }}</a>
-      </h4>
-      <p class="description">
-        <strong>Length:</strong> {{ $video.Params.length }}
-      </p>
-      </li>
-    {{ end }}
+    {{ range $video := $videos }}
+    <li>
+      <a href="{{ relURL "video" }}/{{ $video.Params.link }}" class="video-card">
+        <img src="{{ relURL "images/video" }}/ep{{ print $video.Params.episode $img_suffix }}.png" {{ $dimensions }}>
+        <h4>
+          <span>{{ $video.Params.video_title }}</span>
+        </h4>
+        <p class="description">
+          <strong>Length:</strong> {{ $video.Params.length }}
+        </p>
+      </a>
+    </li>
     {{ end }}
   </ul>
-  </div>
 </div>

From 404e27e198f07299c3fc2f6a0f84d40a3ed30a68 Mon Sep 17 00:00:00 2001
From: Paulie-Aditya <paul.aditya304@gmail.com>
Date: Fri, 26 Sep 2025 23:29:11 +0530
Subject: [PATCH 3/5] testing for smaller screens

---
 assets/sass/layout.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 51ccef90de..730834bcab 100644
--- a/assets/sass/layout.scss
+++ b/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;
       }
 

From 200ae6ac63143ccd36f7a58cab0d4d6f4d2485ca Mon Sep 17 00:00:00 2001
From: Paulie-Aditya <paul.aditya304@gmail.com>
Date: Fri, 26 Sep 2025 23:55:33 +0530
Subject: [PATCH 4/5] updating for smaller screens

---
 assets/sass/layout.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 730834bcab..16e8dc60b1 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -73,11 +73,15 @@ aside {
 
     .video-thumbnails {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+      grid-template-columns: 1fr;
       gap: 1rem;
       list-style: none;
       padding: 0;
       margin: 0;
+
+      @media (min-width: 600px) {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      }
     }
 
     .video-card {

From 62a4bc9b943fc6bce7265b67d48209ca5ebaf80f Mon Sep 17 00:00:00 2001
From: Paulie-Aditya <paul.aditya304@gmail.com>
Date: Sat, 27 Sep 2025 00:11:12 +0530
Subject: [PATCH 5/5] reverting some unnecessary changes

---
 assets/sass/layout.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 16e8dc60b1..101eb47df1 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -69,12 +69,12 @@ aside {
   @include border-radius(5px);
 
   .video-grid {
-    padding: 1rem;
+    padding: 1rem 0;
 
     .video-thumbnails {
       display: grid;
       grid-template-columns: 1fr;
-      gap: 1rem;
+      gap: 2rem;
       list-style: none;
       padding: 0;
       margin: 0;
@@ -91,10 +91,6 @@ 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);