final adjustments for background

assets/css/compiled/main.css

@@ -1671,6 +1671,38 @@ select {
   height: 12rem;
 }
 
+.h-\[50vw\] {
+  height: 50vw;
+}
+
+.h-\[10vw\] {
+  height: 10vw;
+}
+
+.h-\[30vw\] {
+  height: 30vw;
+}
+
+.h-\[50\%\] {
+  height: 50%;
+}
+
+.h-\[20\%\] {
+  height: 20%;
+}
+
+.h-\[10\%\] {
+  height: 10%;
+}
+
+.h-\[1000px\] {
+  height: 1000px;
+}
+
+.h-\[800px\] {
+  height: 800px;
+}
+
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -2006,6 +2038,11 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.via-neutral {
+  --tw-gradient-to: rgba(var(--color-neutral), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--color-neutral), 1), var(--tw-gradient-to);
+}
+
 .to-transparent {
   --tw-gradient-to: transparent;
 }
@@ -2348,6 +2385,10 @@ select {
   opacity: 0.7;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -3508,6 +3549,14 @@ body:has(#menu-controller:checked) {
   opacity: 0.6;
 }
 
+.dark .dark\:mix-blend-normal {
+  mix-blend-mode: normal;
+}
+
+.dark .dark\:mix-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
 .dark .dark\:hover\:bg-primary-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));

layouts/partials/hero/background.html

@@ -7,7 +7,7 @@
 <div class="fixed inset-x-0 top-0 h-[700px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">    
     <div
-        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal dark:mix-blend-multiply">
     </div>
     <div
         class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">

layouts/partials/home/background.html

@@ -7,12 +7,12 @@
                     {{ with .Site.Params.homepage.homepageImage }}
                     {{ $homepageImage := resources.Get . }}
                     {{ if $homepageImage }}
-                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
+                    <img class="w-full h-[1000px] object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
                     <div
-                        class="absolute inset-0 bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent mix-blend-normal">
+                        class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
                     </div>
                     <div
-                        class="opacity-70 absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
+                        class="opacity-70 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
                     </div>
                     {{ end }}
                     {{ end }}