diff --git a/src/lib/components/test_cases/TestCasesPane.svelte b/src/lib/components/test_cases/TestCasesPane.svelte
index f85314ef8ad9e2dee7a206dbc06a7b3a531b953c..856d8d4f114bcebb1b950bfd9a2e7acf17f36899 100644
--- a/src/lib/components/test_cases/TestCasesPane.svelte
+++ b/src/lib/components/test_cases/TestCasesPane.svelte
@@ -84,7 +84,7 @@
   }
 </script>
 
-<section class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-10">
+<section class="grid grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3 gap-10">
   {#each $testCases as situation, situationIndex}
     <TestCaseView
       calculationName={$calculationName}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 421d827fa3652ea612e0f5aa3d02753204f7f47d..0cb7819058801f960b8a1133a10f2d82af036fa0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,6 +5,20 @@ const config = {
   plugins: [require("@tailwindcss/forms")],
   purge: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
+    screens: {
+      'sm': '640px',
+      // => @media (min-width: 640px) { ... }
+      'md': '768px',
+      // => @media (min-width: 768px) { ... }
+      'lg': '1024px',
+      // => @media (min-width: 1024px) { ... }
+      'xl': '1280px',
+      // => @media (min-width: 1280px) { ... }
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
+      '3xl': '2200px',
+      // => @media (min-width: 2200px) { ... }
+    },
     extend: {
       colors: {
         black: colors.black,