fixing images in list to be fit to top and cropped

assets/css/compiled/main.css

@@ -1623,8 +1623,8 @@ select {
   display: none;
 }
 
-.h-full {
-  height: 100%;
+.h-96 {
+  height: 24rem;
 }
 
 .h-12 {
@@ -1639,6 +1639,10 @@ select {
   height: 50%;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-36 {
   height: 9rem;
 }
@@ -1659,6 +1663,22 @@ select {
   height: 300px;
 }
 
+.h-80 {
+  height: 20rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-72 {
+  height: 18rem;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -1695,10 +1715,6 @@ select {
   width: 1.5rem;
 }
 
-.w-auto {
-  width: auto;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -2007,16 +2023,31 @@ select {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+.object-fill {
+  -o-object-fit: fill;
+     object-fit: fill;
+}
+
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
 }
 
+.object-top {
+  -o-object-position: top;
+     object-position: top;
+}
+
 .object-left {
   -o-object-position: left;
      object-position: left;
@@ -2038,6 +2069,22 @@ select {
   padding: 0.25rem;
 }
 
+.p-7 {
+  padding: 1.75rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -3648,10 +3695,6 @@ body:has(#menu-controller:checked) {
     width: auto;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
   .md\:columns-2 {
     -moz-columns: 2;
          columns: 2;