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 {
+.h-96 {
-  height: 100%;
+  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;

layouts/partials/article-link.html

@@ -4,7 +4,7 @@
 {{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-xl") " thumbnailshadow " }}
 {{ end }}
 
-{{ $articleImageClasses := "w-10px md:w-1/3 h-full object-cover thumbnail nozoom" }}
+{{ $articleImageClasses := "object-cover object-top w-full h-64 nozoom" }}
 {{ if .Site.Params.list.showCards }}
 {{ $articleImageClasses = delimit (slice $articleImageClasses "rounded-lg") " " }}
 {{ else }}
@@ -32,8 +32,8 @@
     {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
     {{- with $featured -}}
     {{ with .Resize "600x" }}
-    <div class="{{ $articleImageClasses }}">
+    <div class="w-full md:w-1/3 ">
-      <image class="{{ $articleImageClasses }} object-scale-down" src="{{ .RelPermalink }}"></image>
+      <image class="{{ $articleImageClasses }}" src="{{ .RelPermalink }}"></image>
     </div>
     {{ end }}
     {{- else -}}