BestPractices:Best Practices: Difference between revisions

@@ Line 1: / Line 1: @@
+{{Edited|July|12|2025}}
 <message>Write the content here to display this box</message>
 <html>
 <style>
-   .contentHeader {
+ .bestpractices-card:hover {
-     padding: 5em;
+     transform: translateY(-5px);
-     text-align: center;
+     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
-.heading {
+ .mw-parser-output > *:first-child {
-    font-size: 2.25em;
+     display: none;
-    font-weight: 700;
-    text-transform: uppercase;
-     color: #182933;
 }
+.header3 {
-.grid-container {
+   padding: 2rem 5em;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
-    padding: 0 5em;
 }
-.bestpractices-card {
+.contentHeader {
-    flex: 1 1 calc(50% - 20px); /* Two cards per row, minus the gap */
+   padding: 5em;
-    max-width: calc(50% - 20px);
+   margin-bottom: 2em;
-    background: rgba(226, 245, 250, 0.70);
-    border-radius: 10px;
-    padding: 20px;
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
-.bestpractices-card:hover {
+.heading {
-    transform: translateY(-5px);
+  font-size: 2.25em;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
-.bestpractices-card span {
+.grid-container {
-     color: #1A50AD;
+     display: grid;
-     font-size: 20px;
+     padding: 0 5em;
-     font-weight: 700;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+     grid-auto-rows: minmax(100px, auto);
 }
-@media (max-width: 767px) {
-    .contentHeader {
-        padding: 2em 1em;
-    }
-.heading {
+    @media (max-width: 767px) {
-        font-size: 1.5em;
+        .contentHeader {
-    }
+            padding: 2em 1em;
+            max-width: none;
+        }
+        .heading {
+            font-size: 1.5em;
+        }
+        .sub-heading {
+            font-size: 1em;
+        }
+        .description {
+            font-size: 0.875em;
+        }
+        .input-container {
+            max-width: none;
+            height: auto;
+        }
+        .search-icon {
+            margin-left: 1em;
+        }
+        .search-input {
+            padding-left: 1em;
+            padding-right: 1em;
+        }
-.grid-container {
+       .header3 {
-        padding: 0 2em;
+          padding: 2rem 1em;
+       }
+       .grid-container {
+    grid-template-columns: 1fr !important;
+    padding: 0 2em !important;
+}
      }
-.bestpractices-card {
-        flex: 1 1 100%; /* Single card per row on mobile */
-        max-width: 100%;
-    }
-.bestpractices-card span {
-        font-size: 18px;
-    }
-}
 </style>
@@ Line 77: / Line 79: @@
 </div>
-<div class="grid-container">
+<div style="display: grid; padding: 0 5em; grid-template-columns: repeat(2, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container">
 </html>