Fix broken Case Studies page

src/components/pages/CaseStudiesPage/Cards/Cards.module.css

@@ -1,64 +1,57 @@
 .Cards {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 1.5rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 1rem;
 }
 
-.Card {
-  padding-bottom: 1rem;
-  color: var(--text-color);
-}
-.Card:hover{
-  color: var(--text-color);
-  text-decoration: none;
+.Card {}
+
+.CompanyName {
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 2.625rem;
 }
 
 .CardImage {
-  transition: all .35s ease-in-out;
-  height: 15rem;
-  margin-bottom: 1rem;
-  border-radius: 1rem;
-  border: 1px solid var(--border-color);
   position: relative;
-}
-
-.Card:hover .CardImage{
-  border-color: var(--gray-1);
-}
-
-.CardImage > div{
+  display: block;
+  height: 16rem;
+  padding: 2rem;
+  background-origin: content-box;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
-  width: calc(100% - 4rem);
-  height: calc(100% - 4rem);
-  position: absolute;
-  left: 2rem;
-  top: 2rem;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
 }
 
-.CardImage > img{
-  transition: all .35s ease-in-out;
-  display: block;
+.CardImage:hover {
+  border: 1px solid var(--input-border-color);
+  transition: var(--transition-short);
+}
+
+.LinkIcon {
+  fill: var(--text-color);
   position: absolute;
-  width: 16px;
-  height: 16px;
   bottom: 1rem;
   right: 1rem;
-  opacity: 0;
+  display: none;
 }
-.Card:hover img{
-  opacity: 1;
+
+.LinkIcon svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
-.Card h3{
-  font-size: 1.75rem;
-  line-height: 2rem;
-  font-weight: 400;
+.CardImage:hover .LinkIcon {
+  display: inline-flex;
 }
 
-@media (min-width: 1000px) {
+@media (max-width: 800px) {
   .Cards {
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 4rem;
   }
 }

src/components/pages/CaseStudiesPage/CaseStudiesPage.module.css

@@ -1,76 +1,17 @@
 .Header {
-  margin: 0 auto;
-  width: calc(100% - 1rem);
-  max-width: var(--max-content-width);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.Header {
-  padding: 6rem 0;
-  line-height: 3rem;
-}
-
-.Header h1{
-  font-size: 40px;
-  line-height: 48px;
-  color: var(--primary-0);
-  font-weight: 400;
-  margin: 0;
-  max-width: 35rem;
-}
-
-.Header p {
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: 400;
-  margin: 0;
-  max-width: 42rem;
-}
-.Header p a{
-  text-decoration: underline;
-  color: var(--text-color);
+  padding: 2rem 0;
+  max-width: 48rem;
 }
 
 .Filters {
-  display: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 6rem;
 }
 
-.FiltersMobile{
-  overflow-x: scroll;
-  width: 100%;
-  height: 6rem;
-  position: relative;
-  white-space: nowrap;
-}
-.FiltersMobile > div{
-  width: auto;
-  position: absolute;
-  left: 0;
-  top: 1.5rem;
-}
-.CategoryFilterLink {
-  cursor: pointer;
-  color: var(--text-color);
-  display: inline-block;
-  padding: .5rem 1rem;
-  background-color: transparent;
-  border-radius: 1rem;
-  border-width: 0;
-}
-.CategoryFilterLink.active {
-  background-color: var(--gray-5);
-}
-@media (min-width: 800px) {
+@media (max-width: 800px) {
   .Filters {
-    grid-template-columns: 1fr 1fr 1fr;
-    display: grid;
-    gap: 1rem;
-    margin-bottom: 2rem;
-  }
-  .FiltersMobile{
-    display: none;
+    grid-template-columns: 1fr;
   }
 }

src/components/pages/CaseStudiesPage/CaseStudiesPage.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Layout from "@theme/Layout";
 import Cards from "./Cards/Cards";
 import * as data from '@site/data/case-studies';
+import Input from "@site/src/components/ui/Input/Input";
 import Select from "@site/src/components/ui/Select/Select";
 import Page from "@site/src/components/ui/Page/Page";
 import s from './CaseStudiesPage.module.css';
@@ -40,13 +41,8 @@ const CaseStudiesPage: React.FC = () => {
                   title: option === 'any' ? 'All Industries' : data.categoryLabels[option]
                 }))}
               />
-            </div>
-            <div className={s.FiltersMobile}>
-              <div>
-              {categoryFilterOptions.map((option, idx) => (
-                <button type="button" key={idx} onClick={() => {setCategoryFilter(option)}} className={s.CategoryFilterLink+(option == categoryFilter ? ' '+s.active : '')}>{option === 'any' ? 'All Industries' : data.categoryLabels[option]}</button>
-              ))}
-              </div>
+
+              <Input placeholder="Search" value={searchQuery} onChange={setSearchQuery} clearable />
             </div>
 
             <div>