maverick-wave 4.20.0 → 4.22.0

package/.claude/skills/maverick-wave/SKILL.md

@@ -215,7 +215,8 @@ feature frame) ·
 `mw-rating` · `mw-meta-header` · `mw-stepper` · `mw-timeline-big` /
 `mw-timeline-simple`
 
-**Feedback** `mw-alert` · `mw-toast-stack` · `mw-empty-state` ·
+**Feedback** `mw-alert` · `mw-toast-stack` · `mw-announcement` (+ `-content`,
+`-highlight`, `-static`, color variants) · `mw-empty-state` ·
 `mw-spinner-border` / `mw-spinner-dots` / `mw-spinner-dual-ring` · `mw-skeleton`
 
 **Navigation** `mw-header` + `mw-navbar` · `mw-breadcrumbs` · `mw-pagination` ·
@@ -223,9 +224,10 @@ feature frame) ·
 `-caret`, `-end`, `-up`) · `mw-section-nav` (`references/layout.md`)
 
 **Media & content** `mw-avatar` (+ `initials`, `group`) · `mw-gallery` ·
-`mw-image-slider` · `mw-blog-post` · `mw-code-block` / `mw-terminal` ·
-`mw-techstack-bucket` · `mw-coming-soon` · `mw-divider` · `mw-kbd` ·
-`mw-list` family
+`mw-image-slider` · `mw-blog-post` · `mw-testimonial` (+ `-source`, `-detail`,
+`-featured`) · `mw-prose` · `mw-media` (+ `-caption`) · `mw-code-block` /
+`mw-terminal` · `mw-techstack-bucket` · `mw-coming-soon` · `mw-divider` ·
+`mw-kbd` · `mw-list` family
 
 **Forms** (`references/forms.md`) `mw-field` · `mw-input` · `mw-select` ·
 `mw-textarea` · `mw-checkbox` · `mw-radio` · `mw-toggle` · `mw-slider` ·
@@ -233,8 +235,8 @@ feature frame) ·
 `mw-form-actions` · `mw-login`
 
 **Layout** (`references/layout.md`) `mw-main` · `mw-container` · `mw-content` ·
-`mw-section` · `mw-page-header` · `mw-grid-*` · `mw-row-split` · `mw-hero` ·
-`mw-footer`
+`mw-section` (+ `mw-section-intro`) · `mw-page-header` · `mw-grid-*` ·
+`mw-columns-2/3` · `mw-row-split` · `mw-hero` · `mw-footer`
 
 **Utilities** (`references/layout.md`) `mw-sr-only` / `mw-sr-only-focusable` /
 `mw-skip-link` · `mw-row-split` (+ `center`) · `mw-text-numeric` /
@@ -244,7 +246,7 @@ feature frame) ·
 `mw-corner-plain` ·
 `mw-aspect-square|video|wide|portrait|photo` · `mw-d-{sm,md,lg,xl}-*` /
 `mw-hide-mobile` / `mw-hide-desktop` · `mw-overflow-*` / `mw-snap-x` ·
-spacing, flex, display, text
+`mw-reveal` · spacing, flex, display, text
 
 ## Pitfalls
 

package/.claude/skills/maverick-wave/references/components.md

@@ -636,6 +636,32 @@ class), `-top-center`, `-bottom-right`. Width is capped at
 the entry animation respects `prefers-reduced-motion`. Auto-dismiss is the
 application's job.
 
+## Announcement
+
+The ribbon glued under the fixed header - a discount, a launch note, a
+maintenance window. One per page.
+
+```html
+<aside class="mw-announcement mw-announcement-secondary">
+  <a class="mw-announcement-content" href="#pricing">
+    <span class="mw-announcement-highlight">-20 %</span>
+    <span>Summer discount on all coachings until 06.09.</span>
+  </a>
+</aside>
+```
+
+Positioned fixed below the header and one z-index layer under it, and it stays
+there - the page scrolls beneath it. Variants: `mw-announcement-secondary`,
+`-success`, `-warning`, `-danger`, `-info` (primary is the default).
+`mw-announcement-highlight` is the pill in front of the text; the content
+element is usually an `<a>` but a plain `<div>` works.
+`mw-announcement-static` puts the ribbon into the document flow instead - it
+then scrolls with the content and shifts no anchor offset.
+
+The height lives in `--mw-announcement-height` and drives the anchor scroll
+offset (`scroll-padding-top`) automatically - a taller ribbon raises the token
+instead of fighting the offset.
+
 ## Empty state
 
 ```html
@@ -1561,6 +1587,65 @@ current button carry `active`.
 `mw-blog-post-content-markdown` styles unclassed HTML - the target for rendered
 markdown. `mw-blog-post-content` is the same wrapper for hand-written markup.
 
+## Testimonial
+
+A quote card with its source - a voice about the product. A `figure`, because
+quote and attribution belong together:
+
+```html
+<figure class="mw-testimonial">
+  <blockquote>
+    The workshop picked me up after a long day of talking.
+  </blockquote>
+  <figcaption class="mw-testimonial-source">
+    Anna M. <span class="mw-testimonial-detail">&middot; voice workshop</span>
+  </figcaption>
+</figure>
+```
+
+The card carries the surface, so inside it the blockquote drops most of its
+tint and keeps only the edge and the quotation marks. `mw-testimonial-source`
+uses `margin-top: auto` - in a grid of equal-height cards every source line
+sits on its card's bottom edge. `mw-testimonial-featured` sets the quote a
+size larger, for the one voice lifted above the grid.
+
+For a wall of testimonials of unequal length, put them in `mw-columns-2` or
+`mw-columns-3` (`references/layout.md`) instead of a grid.
+
+## Prose
+
+Long-form running text - a legal page, terms, a plain article. One class on
+the container, bare `h2`/`h3`/`p`/`ul` inside:
+
+```html
+<div class="mw-card mw-card-simple mw-prose">
+  <h2>1. Scope</h2>
+  <p>...</p>
+  <h2>2. Contact</h2>
+  <p>...</p>
+</div>
+```
+
+Headings are deliberately small (`lg`/`md`, primary ink) - in a document they
+structure the reading rather than compete with the page title. First and last
+child lose their outer margins, so the container's own padding rules.
+
+## Media
+
+Self-hosted audio and video. The native controls are the player -
+`accent-color` already brands them - the wrapper only makes the element sit
+right:
+
+```html
+<div class="mw-media">
+  <video src="/media/intro.mp4" controls preload="metadata"></video>
+  <p class="mw-media-caption">Two minutes about how a session works.</p>
+</div>
+```
+
+`audio` and `video` become full-width blocks; a video also gets the surface
+silhouette and a resting shadow. Works with `<audio controls>` the same way.
+
 ## Code & terminal
 
 ```html

package/.claude/skills/maverick-wave/references/layout.md

@@ -162,13 +162,14 @@ viewport, so keep long tooltips off the outermost elements.
 
 ## Sections
 
-| Class                               | Use                                                                        |
-| ----------------------------------- | -------------------------------------------------------------------------- |
-| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 1.75rem    |
-| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                     |
-| `mw-section-title`                  | Centered `3xl` heading with a decorative primary underline - landing pages |
-| `mw-section-subtitle`               | Centered `2xl` heading with a thin secondary underline                     |
-| `mw-section-nav` + `mw-section-btn` | Centered, wrapping row of outline-style jump links                         |
+| Class                               | Use                                                                                                            |
+| ----------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `mw-section`                        | Vertical rhythm for a page band - `--mw-section-padding-block`, 3.3rem (2.5rem below `md`, 1.75rem below `sm`) |
+| `mw-section-alternate`              | Diagonal pattern background; combine with `mw-section`                                                         |
+| `mw-section-title`                  | Centered `3xl` heading with a decorative primary underline - landing pages                                     |
+| `mw-section-intro`                  | The lead paragraph under a section title - centred, muted, 46rem measure                                       |
+| `mw-section-subtitle`               | Centered `2xl` heading with a thin secondary underline                                                         |
+| `mw-section-nav` + `mw-section-btn` | Centered, wrapping row of outline-style jump links                                                             |
 
 ```html
 <section class="mw-section mw-section-alternate">
@@ -303,6 +304,21 @@ Every one of them has a `-lg` twin with a wider gap (2.5rem instead of 1.35rem):
 | `mw-grid-stack-stretch`                       | full width (same result as `mw-grid-1`) |
 | `mw-grid-stack-lg`, `mw-grid-stack-center-lg` | wide-gap twins                          |
 
+**Masonry columns** - `mw-columns-2` and `mw-columns-3`, for cards of unequal
+height where a row grid tears a gap under every short one. CSS multi-column:
+the children flow into columns and close up, the count steps down with the
+viewport (3 → 2 below `lg`, → 1 below `sm`), and every child keeps
+`break-inside: avoid` so a break never lands mid-card. Reading order runs top
+to bottom, then across - right for testimonials and galleries, wrong for
+anything ranked or chronological.
+
+```html
+<div class="mw-columns-3">
+  <figure class="mw-testimonial">...</figure>
+  <figure class="mw-testimonial">...</figure>
+</div>
+```
+
 ## Utilities
 
 **Spacing** - margin `mw-m-*`, `mw-mt-*`, `mw-mb-*`, `mw-ml-*`, `mw-mr-*`,
@@ -340,6 +356,13 @@ with it; `mw-text-capitalize` is the plain transform.
 **Elevation** - `mw-elevation-0` through `-5`, the same ramp every component
 uses. See the scale table in `SKILL.md`. Never hand-roll a `box-shadow`.
 
+**Scroll entrance** - `mw-reveal` lets a block rise briefly as it scrolls into
+view, driven by the browser's scroll timeline (`animation-timeline: view()`) -
+no JavaScript, no observer. Doubly guarded: `prefers-reduced-motion` turns it
+off, and a browser without scroll timelines renders the block in place instead
+of leaving it invisible. Put it on section content, not on the section itself -
+a screen-high band finishes its entrance before its content is halfway up.
+
 **Corner accent** - `mw-corner-plain` drops the accent arc that sits on the
 two round corners of every card, panel, modal, tile, accordion, calendar,
 pagination and login box. Everything else stays: the radii, the border, the

package/.claude/skills/maverick-wave/references/theming.md

@@ -77,7 +77,7 @@ Safari 16.4+, Firefox 128+. The same range is declared as `browserslist` in
 | `--mw-table-scroll-height`                                                                                                                                                   | Per-table height cap for `mw-table-responsive-scroll`                                                                                                                                                                                                                                                                                   |
 | `--mw-kanban-background`, `--mw-kanban-lane-border`, `--mw-kanban-column-min-height`                                                                                         | Per-board surface, lane border and lane floor (120px, 90px on `mw-kanban-compact`)                                                                                                                                                                                                                                                      |
 | `--mw-container-gutter`, `--mw-container-width`                                                                                                                              | Page gutter of `mw-container` (fluid `clamp(1rem, 4.2vw + 0.5rem, 4rem)`, never below the safe-area inset) and the width derived from it (`min(1200px, 100% - 2 * gutter)`)                                                                                                                                                             |
-| `--mw-section-padding-block`                                                                                                                                                 | Top/bottom rhythm of `mw-section` (1.75rem)                                                                                                                                                                                                                                                                                             |
+| `--mw-section-padding-block`                                                                                                                                                 | Top/bottom rhythm of `mw-section` (3.3rem, stepping down to 2.5rem below `md` and 1.75rem below `sm`)                                                                                                                                                                                                                                   |
 | `--mw-calendar-dot`                                                                                                                                                          | Colour of a single calendar dot - set it per dot or per cell; the `mw-calendar-dot-*` classes are presets for it                                                                                                                                                                                                                        |
 | `--mw-scroll-hint-cover`                                                                                                                                                     | Colour the scroll hint on a tab bar fades into. Preset to the page, re-pointed to the card background inside `mw-card`, `mw-panel`, `mw-modal`, `mw-tile`, `mw-calendar`                                                                                                                                                                |
 | `--mw-elevation-1` … `-5`                                                                                                                                                    | Every shadow in the framework. Two layers per level - contact plus ambient. Never write a `box-shadow` by hand: a hand-rolled one is the wrong colour in one of the two themes                                                                                                                                                          |

package/CHANGELOG.md

@@ -6,6 +6,23 @@ Patch releases are only for test purposes - here I only document major and minor
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.22.0] - 2026-09-01
+
+### Added
+
+- `mw-announcement` - the ribbon under the fixed header (discount, launch note), with `-content`, `-highlight` pill, color variants, a `-static` in-flow variant and `--mw-announcement-height` driving the anchor scroll offset
+- `mw-testimonial` - quote card with `-source`, `-detail` and `-featured`, built for walls of voices
+- `mw-prose` - long-form running text container (legal pages, terms, articles): bare h2/h3/p/ul inside, no utility chains
+- `mw-section-intro` - the lead paragraph under a `mw-section-title`
+- `mw-reveal` - scroll entrance via `animation-timeline: view()`, guarded for reduced motion and older browsers
+- `mw-media` - self-hosted audio and video sit full width, video in the surface silhouette
+
+## [4.21.0] - 2026-08-31
+
+### Fixed
+
+- `mw-scroll-hint` keeps a smaller reserve below `md`, where the full one tipped the hero past 100dvh and moved the cue off screen
+
 ## [4.20.0] - 2026-08-31
 
 ### Added

package/index.html

@@ -150,6 +150,10 @@
       <section id="foundations" class="mw-section">
         <div class="mw-container">
           <h2 class="mw-section-title">Foundations</h2>
+          <p class="mw-section-intro">
+            The raw material - type, color, spacing and the small utilities
+            everything else is built from.
+          </p>
           <nav class="mw-section-nav">
             <a href="#typography" class="mw-section-btn">Typography</a>
             <a href="#colors" class="mw-section-btn">Main Colors</a>
@@ -197,6 +201,10 @@
       <section id="layout" class="mw-section mw-section-alternate">
         <div class="mw-container">
           <h2 class="mw-section-title">Layout</h2>
+          <p class="mw-section-intro">
+            The bones of a page - grids, cards, panels and the containers that
+            hold content together.
+          </p>
           <nav class="mw-section-nav">
             <a href="#grid" class="mw-section-btn">Grid System</a>
             <a href="#cards" class="mw-section-btn">Cards</a>
@@ -264,6 +272,10 @@
       <section id="components" class="mw-section">
         <div class="mw-container">
           <h2 class="mw-section-title">Components</h2>
+          <p class="mw-section-intro">
+            The everyday parts - buttons, tags, alerts and their many friends,
+            ready to drop in.
+          </p>
           <nav class="mw-section-nav">
             <a href="#buttons" class="mw-section-btn">Buttons</a>
             <a href="#button-bar" class="mw-section-btn">Button Bar</a>
@@ -277,6 +289,7 @@
             <a href="#ratings" class="mw-section-btn">Ratings</a>
             <a href="#info" class="mw-section-btn">Info</a>
             <a href="#alerts" class="mw-section-btn">Alerts</a>
+            <a href="#announcement" class="mw-section-btn">Announcement</a>
             <a href="#code" class="mw-section-btn">Code</a>
             <a href="#skeleton" class="mw-section-btn">Skeleton</a>
             <a href="#empty-state" class="mw-section-btn">Empty State</a>
@@ -337,6 +350,11 @@
             @@include('./src/partials/alerts-container.html')
           </div>
 
+          <!-- Announcement container -->
+          <div id="announcement">
+            @@include('./src/partials/announcement-container.html')
+          </div>
+
           <!-- Code container -->
           <div id="code">@@include('./src/partials/code-container.html')</div>
 
@@ -361,6 +379,10 @@
       <section id="forms" class="mw-section mw-section-alternate">
         <div class="mw-container">
           <h2 class="mw-section-title">Forms</h2>
+          <p class="mw-section-intro">
+            Inputs, selects, toggles and validation - fields and buttons share
+            one height scale by construction.
+          </p>
           <nav class="mw-section-nav">
             <a href="#form-elements" class="mw-section-btn">Form Elements</a>
             <a href="#input-group" class="mw-section-btn">Input Group</a>
@@ -402,6 +424,10 @@
       <section id="data-display" class="mw-section">
         <div class="mw-container">
           <h2 class="mw-section-title">Data & Display</h2>
+          <p class="mw-section-intro">
+            Tables, boards, timelines and long-form content - everything that
+            shows real data.
+          </p>
           <nav class="mw-section-nav">
             <a href="#page-header" class="mw-section-btn">Page Header</a>
             <a href="#meta-info" class="mw-section-btn">Meta Info</a>
@@ -415,6 +441,9 @@
               >Technology Stack Bucket</a
             >
             <a href="#content-slider" class="mw-section-btn">Content Slider</a>
+            <a href="#testimonials" class="mw-section-btn">Testimonials</a>
+            <a href="#prose" class="mw-section-btn">Prose</a>
+            <a href="#media" class="mw-section-btn">Media</a>
             <a href="#blog-posts" class="mw-section-btn">Blog Posts</a>
           </nav>
 
@@ -468,6 +497,17 @@
             @@include('./src/partials/content-slider-container.html')
           </div>
 
+          <!-- Testimonials container-->
+          <div id="testimonials">
+            @@include('./src/partials/testimonials-container.html')
+          </div>
+
+          <!-- Prose container-->
+          <div id="prose">@@include('./src/partials/prose-container.html')</div>
+
+          <!-- Media container-->
+          <div id="media">@@include('./src/partials/media-container.html')</div>
+
           <!-- Blogposts container-->
           <div id="blog-posts">
             @@include('./src/partials/blog-posts-container.html')

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "4.20.0",
+  "version": "4.22.0",
   "config": {
-    "version_short": "4.20"
+    "version_short": "4.22"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/assets/images/gallery-city.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="City skyline at night">
+  <defs>
+    <linearGradient id="city-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#101830"/>
+      <stop offset="0.6" stop-color="#3a3566"/>
+      <stop offset="1" stop-color="#a5628a"/>
+    </linearGradient>
+    <pattern id="city-win" x="0" y="0" width="18" height="24" patternUnits="userSpaceOnUse">
+      <rect x="4" y="6" width="7" height="9" fill="#ffd98a" opacity="0.72"/>
+    </pattern>
+  </defs>
+  <rect width="800" height="450" fill="url(#city-sky)"/>
+  <circle cx="150" cy="98" r="30" fill="#f4e7c8"/>
+  <circle cx="163" cy="90" r="30" fill="#26224a"/>
+  <g fill="#241f43">
+    <rect x="20" y="248" width="72" height="202"/>
+    <rect x="104" y="196" width="58" height="254"/>
+    <rect x="176" y="286" width="86" height="164"/>
+  </g>
+  <g fill="url(#city-win)">
+    <rect x="20" y="248" width="72" height="202"/>
+    <rect x="104" y="196" width="58" height="254"/>
+    <rect x="176" y="286" width="86" height="164"/>
+  </g>
+  <g fill="#1a1633">
+    <rect x="272" y="156" width="78" height="294"/>
+    <rect x="362" y="228" width="64" height="222"/>
+    <rect x="440" y="122" width="52" height="328"/>
+    <rect x="506" y="204" width="88" height="246"/>
+  </g>
+  <g fill="url(#city-win)">
+    <rect x="272" y="156" width="78" height="294"/>
+    <rect x="362" y="228" width="64" height="222"/>
+    <rect x="440" y="122" width="52" height="328"/>
+    <rect x="506" y="204" width="88" height="246"/>
+  </g>
+  <rect x="462" y="96" width="8" height="30" fill="#1a1633"/>
+  <circle cx="466" cy="92" r="6" fill="#ff7b6b"/>
+  <g fill="#120f27">
+    <rect x="604" y="262" width="70" height="188"/>
+    <rect x="686" y="182" width="60" height="268"/>
+    <rect x="758" y="300" width="42" height="150"/>
+  </g>
+  <g fill="url(#city-win)">
+    <rect x="604" y="262" width="70" height="188"/>
+    <rect x="686" y="182" width="60" height="268"/>
+    <rect x="758" y="300" width="42" height="150"/>
+  </g>
+</svg>

package/src/assets/images/gallery-desert.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Desert dunes under a low sun">
+  <defs>
+    <linearGradient id="des-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#e28b52"/>
+      <stop offset="0.6" stop-color="#f3b972"/>
+      <stop offset="1" stop-color="#fbdda6"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#des-sky)"/>
+  <circle cx="256" cy="180" r="62" fill="#fff2cf"/>
+  <circle cx="256" cy="180" r="104" fill="#fff2cf" opacity="0.16"/>
+  <path d="M0,250 C130,214 236,268 360,252 C486,236 588,196 800,246 L800,450 L0,450 Z" fill="#e9b273"/>
+  <path d="M0,306 C142,264 266,330 402,308 C540,286 660,246 800,304 L800,450 L0,450 Z" fill="#d3924f"/>
+  <g fill="#7d4520">
+    <path d="M602,368 c-5,-28 -3,-54 8,-78 l11,4 c-10,23 -12,48 -8,74 Z"/>
+    <path d="M616,292 c-32,-12 -58,-2 -72,16 c26,-10 48,-11 70,-4 Z"/>
+    <path d="M616,292 c-30,-24 -58,-24 -78,-14 c28,0 52,6 74,20 Z"/>
+    <path d="M616,292 c32,-12 58,-2 72,16 c-26,-10 -48,-11 -70,-4 Z"/>
+    <path d="M616,292 c30,-24 58,-24 78,-14 c-28,0 -52,6 -74,20 Z"/>
+    <path d="M616,292 c-8,-30 2,-50 18,-60 c-8,22 -12,40 -12,60 Z"/>
+    <circle cx="612" cy="296" r="5"/>
+  </g>
+  <path d="M0,368 C122,332 246,390 396,364 C548,338 668,314 800,372 L800,450 L0,450 Z" fill="#b0703a"/>
+  <path d="M0,424 C160,398 300,436 452,414 C598,392 690,382 800,420 L800,450 L0,450 Z" fill="#8a5228"/>
+</svg>

package/src/assets/images/gallery-forest.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Autumn forest with light through the trees">
+  <defs>
+    <linearGradient id="for-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#fbe3ab"/>
+      <stop offset="0.45" stop-color="#e0a659"/>
+      <stop offset="1" stop-color="#7d5327"/>
+    </linearGradient>
+    <linearGradient id="for-haze" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffeec2" stop-opacity="0.6"/>
+      <stop offset="1" stop-color="#ffeec2" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#for-bg)"/>
+  <circle cx="404" cy="132" r="58" fill="#fff6da" opacity="0.75"/>
+  <circle cx="404" cy="132" r="110" fill="#fff6da" opacity="0.22"/>
+  <g fill="#a97236" opacity="0.4">
+    <rect x="72" y="0" width="13" height="450"/>
+    <rect x="214" y="0" width="10" height="450"/>
+    <rect x="352" y="0" width="14" height="450"/>
+    <rect x="498" y="0" width="11" height="450"/>
+    <rect x="628" y="0" width="13" height="450"/>
+    <rect x="756" y="0" width="10" height="450"/>
+  </g>
+  <g fill="#6b451f" opacity="0.85">
+    <rect x="128" y="0" width="22" height="450"/>
+    <rect x="288" y="0" width="18" height="450"/>
+    <rect x="566" y="0" width="20" height="450"/>
+    <rect x="702" y="0" width="16" height="450"/>
+  </g>
+  <g fill="#3d2611">
+    <rect x="24" y="0" width="30" height="450"/>
+    <rect x="428" y="0" width="26" height="450"/>
+    <rect x="772" y="0" width="28" height="450"/>
+  </g>
+  <path d="M0,342 C140,326 280,356 420,340 C560,324 680,344 800,332 L800,450 L0,450 Z" fill="#5b3818"/>
+  <rect y="316" width="800" height="134" fill="url(#for-haze)"/>
+  <g fill="#e8a94d" opacity="0.65">
+    <ellipse cx="150" cy="392" rx="11" ry="7"/>
+    <ellipse cx="298" cy="420" rx="9" ry="6"/>
+    <ellipse cx="472" cy="386" rx="12" ry="7"/>
+    <ellipse cx="624" cy="424" rx="10" ry="6"/>
+    <ellipse cx="722" cy="390" rx="9" ry="6"/>
+    <ellipse cx="76" cy="428" rx="10" ry="6"/>
+    <ellipse cx="390" cy="436" rx="9" ry="6"/>
+  </g>
+</svg>

package/src/assets/images/gallery-lake.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Calm lake at dusk">
+  <defs>
+    <linearGradient id="lake-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#2b3a63"/>
+      <stop offset="0.55" stop-color="#8f6d8e"/>
+      <stop offset="1" stop-color="#f0b083"/>
+    </linearGradient>
+    <linearGradient id="lake-water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#c98f74"/>
+      <stop offset="0.35" stop-color="#5c5f85"/>
+      <stop offset="1" stop-color="#24304f"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#lake-sky)"/>
+  <circle cx="400" cy="238" r="38" fill="#ffd9a8"/>
+  <polygon points="0,258 132,182 250,246 360,196 470,252 600,178 720,250 800,214 800,272 0,272" fill="#5b4f74"/>
+  <polygon points="0,272 800,272 800,450 0,450" fill="url(#lake-water)"/>
+  <rect x="386" y="278" width="28" height="96" rx="14" fill="#ffd9a8" opacity="0.5"/>
+  <rect x="120" y="296" width="180" height="5" rx="2.5" fill="#e7c3ae" opacity="0.35"/>
+  <rect x="470" y="318" width="230" height="5" rx="2.5" fill="#e7c3ae" opacity="0.3"/>
+  <rect x="220" y="348" width="300" height="6" rx="3" fill="#e7c3ae" opacity="0.22"/>
+  <rect x="80" y="392" width="420" height="6" rx="3" fill="#e7c3ae" opacity="0.16"/>
+  <polygon points="586,272 612,192 638,272" fill="#1e2a44"/>
+  <polygon points="634,272 658,206 682,272" fill="#1e2a44"/>
+  <rect x="607" y="262" width="10" height="18" fill="#1e2a44"/>
+</svg>

package/src/assets/images/gallery-mountain.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Mountain range at sunrise">
+  <defs>
+    <linearGradient id="mtn-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#14273f"/>
+      <stop offset="0.5" stop-color="#3d6a97"/>
+      <stop offset="1" stop-color="#a8c6d8"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#mtn-sky)"/>
+  <circle cx="612" cy="128" r="44" fill="#ffe0ae"/>
+  <circle cx="612" cy="128" r="76" fill="#ffe0ae" opacity="0.18"/>
+  <polygon points="0,318 118,214 228,286 344,176 470,296 588,206 704,300 800,224 800,450 0,450" fill="#7096b8"/>
+  <polygon points="344,176 383,214 370,209 357,220 342,210 320,216" fill="#e8f1f7"/>
+  <polygon points="588,206 620,238 608,233 597,243 585,234 566,240" fill="#e8f1f7"/>
+  <polygon points="0,360 96,272 206,344 318,252 438,352 560,268 672,356 800,286 800,450 0,450" fill="#3f6489"/>
+  <polygon points="318,252 350,286 338,281 327,291 315,282 297,288" fill="#dae7f0"/>
+  <polygon points="-20,412 130,320 268,404 404,314 548,406 676,330 800,398 800,450 0,450" fill="#22405e"/>
+  <rect y="424" width="800" height="26" fill="#182f47"/>
+</svg>

package/src/assets/images/gallery-ocean.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Ocean waves rolling to the horizon">
+  <defs>
+    <linearGradient id="oce-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#5aa8cc"/>
+      <stop offset="1" stop-color="#d3edf3"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#oce-sky)"/>
+  <g fill="#ffffff" opacity="0.5">
+    <ellipse cx="150" cy="88" rx="66" ry="20"/>
+    <ellipse cx="198" cy="78" rx="44" ry="16"/>
+    <ellipse cx="596" cy="126" rx="78" ry="18"/>
+    <ellipse cx="644" cy="116" rx="46" ry="14"/>
+  </g>
+  <rect y="204" width="800" height="246" fill="#1f6f96"/>
+  <path d="M0,204 C120,196 200,222 320,214 C440,206 540,228 660,218 C720,213 764,220 800,216 L800,268 L0,268 Z" fill="#2b88ad"/>
+  <path d="M0,262 C140,250 230,286 372,272 C500,259 596,290 800,272 L800,330 L0,330 Z" fill="#1a6c92"/>
+  <path d="M0,326 C150,310 260,354 410,336 C556,318 660,352 800,330 L800,394 L0,394 Z" fill="#125877"/>
+  <path d="M0,390 C170,370 300,414 460,394 C610,375 700,404 800,390 L800,450 L0,450 Z" fill="#0b4159"/>
+  <g fill="#eaf7fb" opacity="0.85">
+    <path d="M60,268 c40,-8 70,6 108,0 c-34,14 -70,4 -108,0 Z"/>
+    <path d="M430,276 c48,-10 84,6 128,-2 c-40,18 -84,6 -128,2 Z"/>
+    <path d="M170,336 c56,-12 96,8 148,-2 c-46,20 -96,6 -148,2 Z"/>
+    <path d="M560,392 c46,-10 80,6 120,-2 c-36,18 -78,6 -120,2 Z"/>
+  </g>
+</svg>

package/src/assets/images/gallery-oldtown.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Old town rooftops and a church tower">
+  <defs>
+    <linearGradient id="old-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#6f93b5"/>
+      <stop offset="1" stop-color="#f2ddc0"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#old-sky)"/>
+  <circle cx="668" cy="112" r="34" fill="#fff3d6" opacity="0.85"/>
+  <g fill="#9a8570" opacity="0.6">
+    <polygon points="60,300 118,240 176,300"/>
+    <rect x="60" y="300" width="116" height="150"/>
+    <polygon points="640,296 700,234 760,296"/>
+    <rect x="640" y="296" width="120" height="154"/>
+  </g>
+  <polygon points="330,206 372,146 414,206" fill="#8f4b3c"/>
+  <rect x="344" y="206" width="56" height="244" fill="#e0cdb2"/>
+  <rect x="360" y="142" width="24" height="10" fill="#6b4136"/>
+  <circle cx="372" cy="238" r="14" fill="#f6efe1" stroke="#6b4136" stroke-width="3"/>
+  <g>
+    <polygon points="140,326 196,268 252,326" fill="#a4553f"/>
+    <rect x="146" y="326" width="100" height="124" fill="#e6d4b8"/>
+    <polygon points="252,308 316,246 380,308" fill="#8d4a38"/>
+    <rect x="258" y="308" width="116" height="142" fill="#dcc7a6"/>
+    <polygon points="400,318 458,258 516,318" fill="#b25e44"/>
+    <rect x="406" y="318" width="104" height="132" fill="#e9d9be"/>
+    <polygon points="516,300 578,240 640,300" fill="#94503b"/>
+    <rect x="522" y="300" width="112" height="150" fill="#d9c4a2"/>
+  </g>
+  <g fill="#6b5a45">
+    <rect x="168" y="356" width="20" height="26"/><rect x="206" y="356" width="20" height="26"/>
+    <rect x="168" y="404" width="20" height="26"/><rect x="206" y="404" width="20" height="26"/>
+    <rect x="282" y="342" width="22" height="30"/><rect x="328" y="342" width="22" height="30"/>
+    <rect x="282" y="396" width="22" height="30"/><rect x="328" y="396" width="22" height="30"/>
+    <rect x="428" y="352" width="20" height="28"/><rect x="468" y="352" width="20" height="28"/>
+    <rect x="428" y="404" width="20" height="28"/><rect x="468" y="404" width="20" height="28"/>
+    <rect x="546" y="336" width="22" height="30"/><rect x="590" y="336" width="22" height="30"/>
+    <rect x="546" y="392" width="22" height="30"/><rect x="590" y="392" width="22" height="30"/>
+  </g>
+  <rect y="440" width="800" height="10" fill="#6b5a45"/>
+</svg>