new site

css/directory.css

@@ -0,0 +1,57 @@
+/* Directory Page Specific Styles */
+.articles-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 2rem;
+    padding: 3rem 0;
+}
+
+/* Ensure article cards work properly in grid */
+.articles-grid > .article-card {
+    width: 100% !important;
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* Additional safety styles for article cards */
+.article-card * {
+    box-sizing: border-box;
+}
+
+/* Prevent any link style overrides */
+a.article-card {
+    color: inherit !important;
+    text-decoration: none !important;
+    display: flex !important;
+}
+
+a.article-card:hover {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+/* Ensure proper flex layout for all child elements */
+.article-card > .article-card-image {
+    flex-shrink: 0;
+}
+
+.article-card > .article-card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+/* For responsive design */
+@media (max-width: 768px) {
+    .articles-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+    .articles-grid {
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
+}