style: Improved responsiveness

Author: idosius

src/app/components/WordCard.tsx

@@ -10,7 +10,7 @@ type WordCardProps = {
 // Tailwind class names need to be explicitly coded to be included in the CSS code
 const articleToClassName: Record<GermanNounArticle, string> = {
   der: 'border-blue-200 bg-blue-100 hover:bg-blue-300 text-blue-900',
-  die: 'border-red-200 bg-red-100 hover:bg-red-300 text-red-900',
+  die: 'border-pink-200 bg-pink-100 hover:bg-pink-300 text-pink-900',
   das: 'border-green-200 bg-green-100 hover:bg-green-300 text-green-900',
 }
 
@@ -19,7 +19,7 @@ export default function WordCard({
 }: WordCardProps) {
   return (
     <article
-      className={`animate-wiggle flex rounded justify-center items-center h-30 text-2xl text-blue-900 capitalize border transition-all ${articleToClassName[article]}`}
+      className={`animate-wiggle flex justify-center items-center aspect-video text-xl sm:text-2xl text-blue-900 capitalize border transition-all ${articleToClassName[article]}`}
     >
       {article} {word}
     </article>

src/app/components/WordList.tsx

@@ -7,7 +7,7 @@ type WordListProps = { wortschatz: Wortschatz }
 
 export default function WordList({ wortschatz }: WordListProps) {
   return (
-    <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 ">
+    <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
       {wortschatz.map((wortschatzEntry) => (
         <WordCard
           key={wortschatzEntry.word}