From b3045a6829c8a366c14d293f9c36b60a2a376571 Mon Sep 17 00:00:00 2001
From: Ivan Urdenko <vaniaurdenko@gmail.com>
Date: Wed, 13 Sep 2023 12:01:23 +0200
Subject: [PATCH] changed the display property for smaller screens

---
 src/example/custom_scss/styles.scss | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/example/custom_scss/styles.scss b/src/example/custom_scss/styles.scss
index 7c7f685..f210760 100644
--- a/src/example/custom_scss/styles.scss
+++ b/src/example/custom_scss/styles.scss
@@ -106,11 +106,6 @@ div.wrapper-continer {
       @extend .theme-btn;
     }
   }
-  @media (max-width: 499px) {
-    .wrapper-continer {
-      display: grid;
-    }
-  }
 }
 
 .white-continer-claim {
@@ -135,6 +130,17 @@ img.course-image {
   margin-bottom: 10px;
 }
 
+/* Media query for screens 500px or smaller */
+@media (max-width: 500px) {
+  .course-info-banner {
+    display: grid;
+    /* Add your grid properties here, for example: */
+    grid-template-columns: 1fr 1fr; /* This creates two equal columns, adjust as needed */
+    gap: 10px; /* Adjust the gap between grid items if needed */
+  }
+}
+
+
 .course-info-banner2 {
   display: flex;
   justify-content: space-around;