adjust ResourceCard and ResourcePage css for responsiveness

Author: aedwardg

src/routes/Resources/ResourceCard.tsx

@@ -2,7 +2,7 @@ import { Entry } from "./types";
 
 const ResourceCard = ({ entry }: { entry: Entry }) => {
   return (
-    <div className="min-h-24 min-w-56 rounded-md bg-slate-400 text-center shadow-lg shadow-gray-600 hover:shadow-2xl hover:shadow-gray-600">
+    <div className="min-h-24 w-96 rounded-md bg-slate-400 text-center shadow-lg shadow-gray-600 hover:shadow-2xl hover:shadow-gray-600">
       <a
         href={entry.url}
         target="_blank"

src/routes/Resources/ResourcePage.tsx

@@ -37,7 +37,7 @@ const ResourcePage = () => {
             {data.pageName}
           </h3>
           <div className="flex w-full justify-center">
-            <div className="mx-4 grid grid-cols-3 gap-x-4 sm:w-5/6 xl:w-3/4">
+            <div className="mx-4 flex flex-wrap justify-center gap-6 sm:w-5/6 xl:w-3/4">
               {data.entries.map((e) => (
                 <ResourceCard entry={e} key={e.title} />
               ))}