adapt to small screens

styles.css

@@ -2,3 +2,40 @@
 .navbar-logo {
   max-height: 20px; /* Adjust the height as needed */
 }
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between; /* Add space between columns */
+    margin: -10px; /* Adjust for padding */
+}
+
+.flex-item {
+    flex: 1 1 30%; /* Grow, shrink, and set a base width of 45% */
+    padding: 10px; /* Padding around items */
+    box-sizing: border-box; /* Include padding in width calculations */
+}
+
+.flex-item:last-child {
+    flex: 1 1 60%; /* Right column: larger, 60% width */
+}
+
+@media (max-width: 768px) {
+    .flex-container {
+        flex-direction: column; /* Stack items vertically */
+    }
+
+    .flex-item:first-child {
+        order: 1; /* Move the first column below the second */
+    }
+
+    .flex-item:last-child {
+        order: 2; /* Keep the second column on top */
+    }
+}
+
+@media (max-width: 600px) {
+    .flex-item {
+        flex: 1 1 100%; /* Full width on very small screens */
+    }
+}