BestPractices:Best Practices: Difference between revisions

@@ Line 4: / Line 4: @@
      .bestpractices-card:hover {
-        transform: translateY(-5px);
+    transform: translateY(-5px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    }
+}
 .mw-parser-output > *:first-child {
-        display: none;
+    display: none;
-    }
+}
 .header3 {
-        padding: 2rem 5em;
+    padding: 2rem 5em;
-    }
+}
 .contentHeader {
-        padding: 5em;
+    padding: 5em;
-    }
+}
 .heading {
-        font-size: 2.25em;
+    font-size: 2.25em;
-    }
+}
 .grid-container {
-        display: grid;
+    display: grid;
-        padding: 0 5em;
+    padding: 0 5em;
-        grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 20px;
+    gap: 20px;
-        grid-auto-rows: minmax(100px, auto);
+    grid-auto-rows: minmax(100px, auto);
-     }
+}
+.bestpractices-card {
+    display: flex;
+     justify-content: center;
+    align-items: center;
+    height: 100px;
+    border-radius: 10px;
+    background: rgba(226, 245, 250, 0.70);
+    padding: 10px;
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
 @media (max-width: 767px) {
-        .contentHeader {
+    .contentHeader {
-            padding: 2em 1em;
+        padding: 2em 1em;
-            max-width: none;
+        max-width: none;
-        }
+    }
 .heading {
-            font-size: 1.5em;
+        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;
-        }
 .header3 {
-            padding: 2rem 1em;
+        padding: 2rem 1em;
-        }
+    }
-.grid-container {
-            grid-template-columns: 1fr !important;
-            padding: 0 2em !important;
-        }
 .bestpractices-card {
-            height: auto;
+        height: auto;
-            padding: 20px;
+        padding: 20px;
-        }
+    }
 .bestpractices-card span {
-            font-size: 18px;
+        font-size: 18px;
-        }
      }
+}
 </style>