Fixes modal, but users still have to say h-full on every element leading to the card

resources/public/output.css

@@ -1155,6 +1155,10 @@ input:checked + .toggle-bg {
   margin: 1rem;
 }
 
+.m-12 {
+  margin: 3rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1332,6 +1336,10 @@ input:checked + .toggle-bg {
   height: 1.5rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1344,47 +1352,43 @@ input:checked + .toggle-bg {
   height: 100%;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
-.h-64 {
-  height: 16rem;
-}
-
 .h-min {
   height: -moz-min-content;
   height: min-content;
 }
 
-.h-\[90vh\] {
-  height: 90vh;
+.h-screen {
+  height: 100vh;
+}
+
+.h-24 {
+  height: 6rem;
 }
 
 .max-h-96 {
   max-height: 24rem;
 }
 
-.max-h-full {
-  max-height: 100%;
-}
-
-.max-h-\[90vh\] {
-  max-height: 90vh;
-}
-
-.max-h-\[100vh\] {
-  max-height: 100vh;
-}
-
 .max-h-\[80vh\] {
   max-height: 80vh;
 }
 
+.max-h-full {
+  max-height: 100%;
+}
+
+.max-h-\[50\%\] {
+  max-height: 50%;
+}
+
 .w-1\/2 {
   width: 50%;
 }
 
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1454,21 +1458,32 @@ input:checked + .toggle-bg {
   width: 100vw;
 }
 
-.w-min {
-  width: -moz-min-content;
-  width: min-content;
+.w-\[900px\] {
+  width: 900px;
 }
 
-.w-8\/12 {
-  width: 66.666667%;
+.w-\[1200px\] {
+  width: 1200px;
 }
 
-.w-6\/12 {
-  width: 50%;
+.w-\[2900px\] {
+  width: 2900px;
 }
 
-.w-1\/4 {
-  width: 25%;
+.min-w-\[25\%\] {
+  min-width: 25%;
+}
+
+.min-w-\[500px\] {
+  min-width: 500px;
+}
+
+.min-w-\[450px\] {
+  min-width: 450px;
+}
+
+.min-w-\[700px\] {
+  min-width: 700px;
 }
 
 .max-w-2xl {
@@ -1495,8 +1510,8 @@ input:checked + .toggle-bg {
   max-width: 1024px;
 }
 
-.max-w-xs {
-  max-width: 20rem;
+.max-w-6xl {
+  max-width: 72rem;
 }
 
 .flex-1 {
@@ -1709,18 +1724,10 @@ input:checked + .toggle-bg {
   flex-wrap: wrap;
 }
 
-.place-content-center {
-  place-content: center;
-}
-
 .place-items-center {
   place-items: center;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .items-start {
   align-items: flex-start;
 }
@@ -1757,6 +1764,10 @@ input:checked + .toggle-bg {
   justify-content: space-between;
 }
 
+.justify-stretch {
+  justify-content: stretch;
+}
+
 .justify-items-stretch {
   justify-items: stretch;
 }
@@ -1857,6 +1868,10 @@ input:checked + .toggle-bg {
   align-self: center;
 }
 
+.self-stretch {
+  align-self: stretch;
+}
+
 .justify-self-end {
   justify-self: end;
 }
@@ -2148,6 +2163,11 @@ input:checked + .toggle-bg {
   background-color: rgb(255 230 230 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 3 3 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2162,6 +2182,11 @@ input:checked + .toggle-bg {
   background-color: rgb(253 246 178 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 120 3 / var(--tw-bg-opacity));
+}
+
 .\!bg-opacity-0 {
   --tw-bg-opacity: 0 !important;
 }
@@ -2202,8 +2227,8 @@ input:checked + .toggle-bg {
   padding: 1rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
+.p-8 {
+  padding: 2rem;
 }
 
 .px-2 {
@@ -2226,6 +2251,11 @@ input:checked + .toggle-bg {
   padding-right: 1.25rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2266,11 +2296,6 @@ input:checked + .toggle-bg {
   padding-bottom: 1.25rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -3614,12 +3639,12 @@ input:checked + .toggle-bg {
     display: block;
   }
 
-  .sm\:max-h-\[90vh\] {
-    max-height: 90vh;
+  .sm\:items-center {
+    align-items: center;
   }
 
-  .sm\:max-w-2xl {
-    max-width: 42rem;
+  .sm\:justify-center {
+    justify-content: center;
   }
 
   .sm\:rounded-lg {
@@ -3666,6 +3691,10 @@ input:checked + .toggle-bg {
     align-items: center;
   }
 
+  .md\:justify-center {
+    justify-content: center;
+  }
+
   .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -3677,6 +3706,10 @@ input:checked + .toggle-bg {
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
+
+  .md\:p-12 {
+    padding: 3rem;
+  }
 }
 
 @media (min-width: 1024px) {