From ccc9da3ddd134304d495dd11eb82799c24182595 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Sat, 31 May 2025 16:14:03 +0530
Subject: [PATCH] Update webinar videos grid layout to 4/3/2/1 column
 responsive system

- Changed desktop grid from auto-fit to fixed 4 columns
- Implemented responsive breakpoints:
  * Desktop (>1200px): 4 columns
  * Medium Desktop/Tablet (1200px): 3 columns
  * Tablet/Medium Screens (900px): 2 columns
  * Mobile/Small Screens (600px): 1 column
- Maintained all existing styling, animations and design
---
 css/style.css | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1a80130..330587c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4090,7 +4090,7 @@ body {
 
 .webinar-videos-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
     gap: 30px;
     margin-top: 60px;
 }
@@ -4156,14 +4156,26 @@ body {
 }
 
 /* Responsive Design for Webinar Videos */
+/* Large Desktop: 4 columns (default above 1200px) */
+
+/* Medium Desktop/Large Tablet: 3 columns */
 @media (max-width: 1200px) {
     .webinar-videos-grid {
-        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        grid-template-columns: repeat(3, 1fr);
         gap: 25px;
     }
 }
 
-@media (max-width: 768px) {
+/* Tablet/Medium Screens: 2 columns */
+@media (max-width: 900px) {
+    .webinar-videos-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+}
+
+/* Mobile/Small Screens: 1 column */
+@media (max-width: 600px) {
     .webinar-videos-section {
         padding: 60px 0;
     }
@@ -4187,6 +4199,7 @@ body {
     }
 }
 
+/* Extra Small Mobile: 1 column with optimizations */
 @media (max-width: 480px) {
     .webinar-videos-grid {
         grid-template-columns: 1fr;