fixed margin in lists and added show cards

assets/css/compiled/main.css

@@ -1497,16 +1497,12 @@ select {
   margin-top: 1.5rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
+.mt-3 {
+  margin-top: 0.75rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
-.mb-\[5rem\] {
-  margin-bottom: 5rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 
 .mr-3 {
@@ -1533,6 +1529,10 @@ select {
   margin-bottom: 0.25rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1545,10 +1545,6 @@ select {
   margin-left: 0.5rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
@@ -1593,8 +1589,8 @@ select {
   height: 3rem;
 }
 
-.h-32 {
-  height: 8rem;
+.h-full {
+  height: 100%;
 }
 
 .h-24 {
@@ -1605,10 +1601,6 @@ select {
   height: 2rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-36 {
   height: 9rem;
 }
@@ -1625,6 +1617,12 @@ select {
   width: 3rem;
 }
 
+.w-max {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .w-36 {
   width: 9rem;
 }
@@ -1815,6 +1813,10 @@ select {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1833,6 +1835,11 @@ select {
   border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
 }
 
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
+}
+
 .border-primary-400 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
@@ -1843,11 +1850,6 @@ select {
   border-color: rgba(var(--color-primary-500), var(--tw-border-opacity));
 }
 
-.border-neutral-200 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
-}
-
 .bg-neutral {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral), var(--tw-bg-opacity));
@@ -2860,7 +2862,10 @@ body:has(#menu-controller:checked) {
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;
-  box-shadow: 10px 10px 30px 2px rgba(0, 0, 0, 0.6);
+}
+
+.thumbnailshadow {
+  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
 @media (min-width: 640px) {
@@ -2877,7 +2882,8 @@ body:has(#menu-controller:checked) {
 @media (min-width: 853px) {
   .thumbnail {
     min-width: 300px;
-    height: 180px;
+    min-height: 180px;
+    height: auto;
   }
 
   .article {
@@ -3013,10 +3019,6 @@ body:has(#menu-controller:checked) {
   margin-right: 1rem;
 }
 
-[dir="ltr"] .ltr\:ml-1 {
-  margin-left: 0.25rem;
-}
-
 [dir="ltr"] .ltr\:-ml-5 {
   margin-left: -1.25rem;
 }
@@ -3073,10 +3075,6 @@ body:has(#menu-controller:checked) {
   margin-left: 1rem;
 }
 
-[dir="rtl"] .rtl\:mr-1 {
-  margin-right: 0.25rem;
-}
-
 [dir="rtl"] .rtl\:-mr-5 {
   margin-right: -1.25rem;
 }
@@ -3163,16 +3161,16 @@ body:has(#menu-controller:checked) {
   border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
 }
 
-.dark .dark\:border-primary-600 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-primary-600), var(--tw-border-opacity));
-}
-
 .dark .dark\:border-neutral-700 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
 }
 
+.dark .dark\:border-primary-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-primary-600), var(--tw-border-opacity));
+}
+
 .dark .dark\:bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-800), var(--tw-bg-opacity));
@@ -3293,26 +3291,14 @@ body:has(#menu-controller:checked) {
 }
 
 @media (min-width: 640px) {
-  .sm\:mr-7 {
-    margin-right: 1.75rem;
-  }
-
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
 
-  .sm\:flex {
-    display: flex;
-  }
-
   .sm\:w-1\/2 {
     width: 50%;
   }
 
-  .sm\:w-32 {
-    width: 8rem;
-  }
-
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3363,8 +3349,12 @@ body:has(#menu-controller:checked) {
 }
 
 @media (min-width: 853px) {
-  .md\:mb-0 {
-    margin-bottom: 0px;
+  .md\:mr-7 {
+    margin-right: 1.75rem;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0px;
   }
 
   .md\:ml-12 {
@@ -3383,6 +3373,10 @@ body:has(#menu-controller:checked) {
     width: 33.333333%;
   }
 
+  .md\:w-auto {
+    width: auto;
+  }
+
   .md\:justify-start {
     justify-content: flex-start;
   }