added multiple options to display hero images

assets/css/compiled/main.css

@@ -1510,18 +1510,14 @@ select {
   margin-top: 1.25rem;
 }
 
-.mt-2\.5 {
-  margin-top: 0.625rem;
+.mt-1 {
+  margin-top: 0.25rem;
 }
 
 .mb-6 {
   margin-bottom: 1.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1594,10 +1590,6 @@ select {
   margin-bottom: 0px;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
@@ -1638,12 +1630,16 @@ select {
   height: 6rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-36 {
   height: 9rem;
 }
 
-.h-8 {
-  height: 2rem;
+.h-\[400px\] {
+  height: 400px;
 }
 
 .h-48 {
@@ -1654,6 +1650,38 @@ select {
   height: 50%;
 }
 
+.h-\[350px\] {
+  height: 350px;
+}
+
+.h-\[350vh\] {
+  height: 350vh;
+}
+
+.h-\[10vh\] {
+  height: 10vh;
+}
+
+.h-\[100vh\] {
+  height: 100vh;
+}
+
+.h-\[20vh\] {
+  height: 20vh;
+}
+
+.h-\[30vh\] {
+  height: 30vh;
+}
+
+.h-\[35vh\] {
+  height: 35vh;
+}
+
+.h-\[45vh\] {
+  height: 45vh;
+}
+
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -1955,6 +1983,10 @@ select {
   background-color: rgba(var(--color-neutral-100), 0.5);
 }
 
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -1963,12 +1995,22 @@ select {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.from-neutral {
+  --tw-gradient-from: rgba(var(--color-neutral), 1);
+  --tw-gradient-to: rgba(var(--color-neutral), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-primary-500 {
   --tw-gradient-from: rgba(var(--color-primary-500), 1);
   --tw-gradient-to: rgba(var(--color-primary-500), 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.to-transparent {
+  --tw-gradient-to: transparent;
+}
+
 .to-secondary-700 {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
@@ -2281,6 +2323,10 @@ select {
   opacity: 0;
 }
 
+.mix-blend-normal {
+  mix-blend-mode: normal;
+}
+
 .mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -2992,12 +3038,32 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
-.single_hero {
+.single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;
 }
 
+.single_hero_round {
+  max-height: 50vh;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.single_hero_background {
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+  width: calc(100% + 40px);
+  z-index: -10;
+  margin-left: -20px;
+}
+
+.hero_gradient {
+  width: 100%;
+  height: 100%;
+}
+
 .thumbnailshadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
@@ -3352,6 +3418,12 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-800), var(--tw-bg-opacity));
 }
 
+.dark .dark\:from-neutral-800 {
+  --tw-gradient-from: rgba(var(--color-neutral-800), 1);
+  --tw-gradient-to: rgba(var(--color-neutral-800), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark .dark\:from-primary-600 {
   --tw-gradient-from: rgba(var(--color-primary-600), 1);
   --tw-gradient-to: rgba(var(--color-primary-600), 0);
@@ -3547,6 +3619,30 @@ body:has(#menu-controller:checked) {
     height: 14rem;
   }
 
+  .md\:h-\[1000px\] {
+    height: 1000px;
+  }
+
+  .md\:h-\[500px\] {
+    height: 500px;
+  }
+
+  .md\:h-\[500vh\] {
+    height: 500vh;
+  }
+
+  .md\:h-\[10vh\] {
+    height: 10vh;
+  }
+
+  .md\:h-\[35vh\] {
+    height: 35vh;
+  }
+
+  .md\:h-\[45vh\] {
+    height: 45vh;
+  }
+
   .md\:w-1\/3 {
     width: 33.333333%;
   }
@@ -3629,10 +3725,58 @@ body:has(#menu-controller:checked) {
     height: 18rem;
   }
 
+  .lg\:h-\[500px\] {
+    height: 500px;
+  }
+
   .lg\:h-full {
     height: 100%;
   }
 
+  .lg\:h-\[1000px\] {
+    height: 1000px;
+  }
+
+  .lg\:h-\[100px\] {
+    height: 100px;
+  }
+
+  .lg\:h-\[1000vh\] {
+    height: 1000vh;
+  }
+
+  .lg\:h-\[100vh\] {
+    height: 100vh;
+  }
+
+  .lg\:h-\[10vh\] {
+    height: 10vh;
+  }
+
+  .lg\:h-\[50vh\] {
+    height: 50vh;
+  }
+
+  .lg\:h-\[40vh\] {
+    height: 40vh;
+  }
+
+  .lg\:h-\[45vh\] {
+    height: 45vh;
+  }
+
+  .lg\:h-\[60vh\] {
+    height: 60vh;
+  }
+
+  .lg\:h-\[55vh\] {
+    height: 55vh;
+  }
+
+  .lg\:h-\[35vh\] {
+    height: 35vh;
+  }
+
   .lg\:w-1\/4 {
     width: 25%;
   }

assets/css/main.css

@@ -347,12 +347,31 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
-.single_hero {
+.single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;
 }
 
+.single_hero_round {
+  max-height: 50vh;
+  object-fit: cover;
+}
+
+.single_hero_background {
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+  width: calc(100% + 40px);
+  z-index: -10;
+  margin-left: -20px;
+}
+
+.hero_gradient {
+  width: 100%;
+  height: 100%;
+}
+
 .thumbnailshadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }