Add hero images.

assets/css/compiled/main.css

@@ -826,6 +826,9 @@ body.zen-mode-enable {
   .\!mt-0 {
     margin-top: calc(var(--spacing) * 0) !important;
   }
+  .-mt-4 {
+    margin-top: calc(var(--spacing) * -4);
+  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -883,9 +886,15 @@ body.zen-mode-enable {
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mr-5 {
     margin-right: calc(var(--spacing) * 5);
   }
+  .mr-6 {
+    margin-right: calc(var(--spacing) * 6);
+  }
   .mr-auto {
     margin-right: auto;
   }
@@ -910,6 +919,9 @@ body.zen-mode-enable {
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .mb-5 {
     margin-bottom: calc(var(--spacing) * 5);
   }
@@ -1101,6 +1113,24 @@ body.zen-mode-enable {
   .max-h-3 {
     max-height: calc(var(--spacing) * 3);
   }
+  .max-h-8 {
+    max-height: calc(var(--spacing) * 8);
+  }
+  .max-h-10 {
+    max-height: calc(var(--spacing) * 10);
+  }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
+  .max-h-80 {
+    max-height: calc(var(--spacing) * 80);
+  }
+  .max-h-82 {
+    max-height: calc(var(--spacing) * 82);
+  }
+  .max-h-85 {
+    max-height: calc(var(--spacing) * 85);
+  }
   .max-h-\[5rem\] {
     max-height: 5rem;
   }
@@ -1333,9 +1363,15 @@ body.zen-mode-enable {
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
@@ -1417,6 +1453,12 @@ body.zen-mode-enable {
   .scroll-smooth {
     scroll-behavior: smooth;
   }
+  .\!rounded-full {
+    border-radius: calc(infinity * 1px) !important;
+  }
+  .\!rounded-lg {
+    border-radius: var(--radius-lg) !important;
+  }
   .\!rounded-md {
     border-radius: var(--radius-md) !important;
   }
@@ -1686,6 +1728,9 @@ body.zen-mode-enable {
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1755,6 +1800,9 @@ body.zen-mode-enable {
   .py-\[1px\] {
     padding-block: 1px;
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2126,6 +2174,11 @@ body.zen-mode-enable {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2323,6 +2376,27 @@ body.zen-mode-enable {
       display: none;
     }
   }
+  .hover\:rounded {
+    &:hover {
+      @media (hover: hover) {
+        border-radius: 0.25rem;
+      }
+    }
+  }
+  .hover\:rounded-full {
+    &:hover {
+      @media (hover: hover) {
+        border-radius: calc(infinity * 1px);
+      }
+    }
+  }
+  .hover\:rounded-lg {
+    &:hover {
+      @media (hover: hover) {
+        border-radius: var(--radius-lg);
+      }
+    }
+  }
   .hover\:border-transparent {
     &:hover {
       @media (hover: hover) {
@@ -3301,6 +3375,15 @@ body.zen-mode-enable {
       }
     }
   }
+  .dark\:hover\:bg-primary-800 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: rgba(var(--color-primary-800), 1);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-primary-900 {
     &:is(.dark *) {
       &:hover {

assets/css/custom.css

@@ -14,4 +14,9 @@ html {
 
 h1, h2, h3, h4, h5, h6, .main-menu, .decoration-primary-500 {
     font-family: cstf;
+}
+
+figure {
+    margin: .5em;
+    padding: 0;
 }