srcdev-nuxt-components 9.1.41 → 9.1.43

package/.claude/settings.json

@@ -26,7 +26,9 @@
       "Bash(node -e ':*)",
       "Bash(git ls-tree *)",
       "Bash(node -p \"require\\('./package.json'\\).version\")",
-      "Bash(git status *)"
+      "Bash(git status *)",
+      "Bash(cp /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/auto-grid.md)",
+      "Bash(rm /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md)"
     ],
     "additionalDirectories": []
   }

package/.claude/skills/components/{data-grid.md → auto-grid.md}

@@ -1,8 +1,8 @@
-# DataGrid Component
+# AutoGrid Component
 
 ## Overview
 
-`DataGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `250px` each. Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
+`AutoGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `250px` each. Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
 
 ---
 
@@ -11,21 +11,21 @@
 Pass any number of named slots — the component renders each one in document order inside the grid.
 
 ```vue
-<DataGrid>
+<AutoGrid>
   <template #item-1><StatCard label="Revenue" value="£24,500" /></template>
   <template #item-2><StatCard label="Clients" value="142" /></template>
   <template #item-3><StatCard label="Bookings" value="38" /></template>
-</DataGrid>
+</AutoGrid>
 ```
 
 When filling from a data array, use a dynamic slot name in a `v-for`:
 
 ```vue
-<DataGrid>
+<AutoGrid>
   <template v-for="(item, i) in stats" #[`item-${i}`] :key="i">
     <StatCard :label="item.label" :value="item.value" />
   </template>
-</DataGrid>
+</AutoGrid>
 ```
 
 ---
@@ -34,10 +34,10 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 
 > **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
 
-| Prop (template form) | Type | Default | Notes |
-|---|---|---|---|
-| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
+| Prop (template form)       | Type                                        | Default | Notes                                         |
+| -------------------------- | ------------------------------------------- | ------- | --------------------------------------------- |
+| `tag`                      | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
+| `:style-class-passthrough` | `string \| string[]`                        | `[]`    | Extra CSS classes on the root element.        |
 
 ---
 
@@ -45,25 +45,27 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 
 Override these via `style` attribute or a `styleClassPassthrough` class in a consuming `<style>` block.
 
-| Property | Default | Notes |
-|---|---|---|
-| `--data-grid-columns` | `repeat(auto-fit, minmax(250px, 1fr))` | Full `grid-template-columns` value. Override to fix column count or change min width. |
-| `--data-grid-gap` | `1rem` | Grid gap between items. |
+| Property                  | Default  | Notes                                                                                    |
+| ------------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `--auto-grid-min-col-size` | `250px` | Minimum column width; browser auto-fits as many columns as will fit.                    |
+| `--auto-grid-gap`          | `1rem`  | Grid gap between items.                                                                  |
 
 ### Fixed column count
 
+Override `grid-template-columns` directly — there is no single token for this:
+
 ```vue
-<DataGrid style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;">
+<AutoGrid style="grid-template-columns: repeat(3, 1fr); --auto-grid-gap: 2.4rem;">
   ...
-</DataGrid>
+</AutoGrid>
 ```
 
 ### Narrower minimum item width
 
 ```vue
-<DataGrid style="--data-grid-columns: repeat(auto-fit, minmax(180px, 1fr));">
+<AutoGrid style="--auto-grid-min-col-size: 180px;">
   ...
-</DataGrid>
+</AutoGrid>
 ```
 
 ---
@@ -73,7 +75,7 @@ Override these via `style` attribute or a `styleClassPassthrough` class in a con
 ### Stat cards (default auto-fit)
 
 ```vue
-<DataGrid>
+<AutoGrid>
   <template #revenue>
     <div class="stat-card">
       <span class="stat-card-label">Revenue</span>
@@ -86,17 +88,17 @@ Override these via `style` attribute or a `styleClassPassthrough` class in a con
       <span class="stat-card-value">142</span>
     </div>
   </template>
-</DataGrid>
+</AutoGrid>
 ```
 
 ### Semantic section with auto aria-labelledby
 
 ```vue
-<DataGrid tag="section">
+<AutoGrid tag="section">
   <!-- aria-labelledby is wired automatically via useAriaLabelledById -->
   <template #item-1><div>Item 1</div></template>
   <template #item-2><div>Item 2</div></template>
-</DataGrid>
+</AutoGrid>
 ```
 
 ### Data-driven grid
@@ -105,20 +107,20 @@ Override these via `style` attribute or a `styleClassPassthrough` class in a con
 <script setup lang="ts">
 const stats = [
   { id: "revenue", label: "Revenue", value: "£24,500" },
-  { id: "clients", label: "Clients",  value: "142" },
+  { id: "clients", label: "Clients", value: "142" },
   { id: "bookings", label: "Bookings", value: "38" },
 ];
 </script>
 
 <template>
-  <DataGrid>
+  <AutoGrid>
     <template v-for="stat in stats" #[stat.id] :key="stat.id">
       <div class="stat-card">
         <span class="stat-card-label">{{ stat.label }}</span>
         <span class="stat-card-value">{{ stat.value }}</span>
       </div>
     </template>
-  </DataGrid>
+  </AutoGrid>
 </template>
 ```
 
@@ -137,19 +139,19 @@ See [component-aria-landmark.md](../component-aria-landmark.md) for the full lan
 ## Local style override scaffold
 
 ```vue
-<DataGrid :style-class-passthrough="['my-data-grid']">
+<AutoGrid :style-class-passthrough="['my-auto-grid']">
   ...
-</DataGrid>
+</AutoGrid>
 
 <style>
-/* ─── DataGrid local overrides ──────────────────────────────────────
+/* ─── AutoGrid local overrides ──────────────────────────────────────
    Use CSS custom properties for layout, not utility classes.
    Delete this block if no overrides are needed.
    ─────────────────────────────────────────────────────────────────── */
-.data-grid {
-  &.my-data-grid {
-    --data-grid-columns: repeat(auto-fit, minmax(200px, 1fr));
-    --data-grid-gap: 2rem;
+.auto-grid {
+  &.my-auto-grid {
+    --auto-grid-min-col-size: 200px;
+    --auto-grid-gap: 2rem;
   }
 }
 </style>
@@ -163,5 +165,5 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 - Auto-imported in Nuxt — no manual import needed.
 - Slot names can be anything — semantic (`#revenue`) or indexed (`#item-0`). Document order determines render order.
-- `--data-grid-columns` accepts any valid `grid-template-columns` value, including named tracks and `subgrid`.
-- The component does not impose a column count — `auto-fit` with `minmax` means the browser decides. Use `repeat(N, 1fr)` in `--data-grid-columns` to fix the count.
+- `--auto-grid-min-col-size` controls the minimum column width; `auto-fit` fills as many columns as will fit.
+- To fix the column count, override `grid-template-columns` directly (e.g. `style="grid-template-columns: repeat(3, 1fr)"`) — there is no single token for this.

package/.claude/skills/components/samaritan-prompt-mixed.md

@@ -0,0 +1,139 @@
+---
+name: SamaritanPromptMixed
+description: SamaritanPromptMixed animated text prompt — props, MessageConfig API, typewriter/word-pulse effects, accessibility (aria-live), CSS tokens, consumer styling
+type: reference
+---
+
+# SamaritanPromptMixed
+
+## Overview
+
+`SamaritanPromptMixed` cycles through a list of messages using animated text effects. Each message can independently use either a `typewriter` effect (characters typed and deleted one-by-one) or a `word-pulse` effect (full text fades in, holds, then fades out). Effects and timing can be set globally via props and overridden per-message via `MessageConfig`.
+
+The component uses `useCancellableTimer` for all async timing — the loop exits cleanly on `onUnmounted` without dangling promises.
+
+### Accessibility
+
+- The visual animated content (`.samaritan-prompt__content`) carries `aria-hidden="true"` — screen readers never hear incremental characters.
+- A visually hidden `aria-live="polite"` `aria-atomic="true"` span announces the complete message at the moment it is fully displayed:
+  - **Typewriter**: announced after all characters are typed (before the hold/delete phase).
+  - **Word-pulse**: announced when `textOpacity` reaches `1` (fade-in complete).
+- `announcedText` is cleared to `""` before each deletion/fade-out, so the same message announced again in the next cycle fires a new announcement (value changes `"" → text`).
+- `prefers-reduced-motion: reduce` disables the content fade transition and the cursor pulse animation via a CSS media query.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `messageConfigs` | `MessageConfig[]` | — | Array of message objects. **Required.** |
+| `effect` | `"typewriter" \| "word-pulse"` | `"typewriter"` | Default effect for all messages. |
+| `typeSpeed` | `number` | `80` | ms per character typed. |
+| `deleteSpeed` | `number` | `40` | ms per character deleted. |
+| `holdDuration` | `number` | `7000` | ms to hold the fully typed text before deleting. |
+| `pauseDuration` | `number` | `1000` | ms pause after a message completes, before the next begins. |
+| `wordDuration` | `number` | `1200` | ms the word-pulse text stays fully visible. |
+| `fadeDuration` | `number` | `400` | ms for the word-pulse fade-in / fade-out CSS transition. |
+| `introDelay` | `number` | `2000` | ms delay before the first message starts on mount. Set to `0` to start immediately. |
+| `hideCursorInCycle` | `boolean` | `true` | Hide the cursor during text animation; show it during pause/hold. Per-message override available. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## MessageConfig
+
+Each entry in `messageConfigs` accepts:
+
+```typescript
+interface MessageConfig {
+  text: string;
+  effect?: "typewriter" | "word-pulse";  // overrides global prop
+  typeSpeed?: number;
+  deleteSpeed?: number;
+  holdDuration?: number;
+  pauseDuration?: number;
+  wordDuration?: number;
+  fadeDuration?: number;
+  hideCursorInCycle?: boolean;
+}
+```
+
+Any field omitted falls back to the corresponding component prop.
+
+## Basic usage
+
+```vue
+<SamaritanPromptMixed
+  :message-configs="[
+    { text: 'INITIALISING SYSTEM' },
+    { text: 'LOADING PROFILE' },
+    { text: 'ACCESS GRANTED' },
+  ]"
+/>
+```
+
+## Mixed effects
+
+```vue
+<SamaritanPromptMixed
+  :message-configs="[
+    { text: 'INITIALISING SYSTEM', effect: 'typewriter', hold-duration: 3000 },
+    { text: 'STAND BY', effect: 'word-pulse', word-duration: 2000 },
+    { text: 'CONNECTED', effect: 'typewriter' },
+  ]"
+/>
+```
+
+## Fast intro, no delay
+
+```vue
+<SamaritanPromptMixed
+  :intro-delay="0"
+  :type-speed="50"
+  :message-configs="[{ text: 'READY' }]"
+/>
+```
+
+## CSS custom properties
+
+| Token | Default | Description |
+|-------|---------|-------------|
+| `--samaritan-font-size` | `2rem` | Text size. |
+| `--samaritan-color-text` | `#ffffff` | Text colour. |
+| `--samaritan-color-underline` | `#ffffff` | Underline bar colour. |
+| `--samaritan-color-cursor` | `#cc0000` | Cursor colour (peak of pulse). |
+| `--samaritan-color-cursor-off` | `transparent` | Cursor colour (trough of pulse). |
+| `--samaritan-font-family` | `"Mono MMM 5", "Nova Mono", "Courier New", monospace` | Font stack. |
+| `--samaritan-letter-spacing` | `0.08em` | Letter spacing. |
+
+The custom font `Mono MMM 5` is loaded via `@font-face` inside the component's unscoped `<style>` block from `/fonts/monoMMM_5.ttf`.
+
+## Consumer styling
+
+Use an unscoped style block scoped by a page or section wrapper. No `:deep()` needed.
+
+```vue
+<style>
+.my-page .samaritan-prompt {
+  --samaritan-font-size: 3.2rem;
+  --samaritan-color-text: #00ff88;
+  --samaritan-color-cursor: #ff4400;
+}
+</style>
+```
+
+## CSS classes
+
+| Class | Notes |
+|-------|-------|
+| `.samaritan-prompt` | Root element. |
+| `.samaritan-prompt__content` | Wraps text + underline. `aria-hidden="true"`. Opacity transitions on word-pulse effect. |
+| `.samaritan-prompt__stage` | Centers the text span; min-height prevents layout shift. |
+| `.samaritan-prompt__text` | The visible animated text. `text-transform: uppercase`. |
+| `.samaritan-prompt__underline` | Horizontal rule below text. |
+| `.samaritan-prompt__cursor` | `▲` glyph; pulses via `samaritan-pulse` keyframe. `aria-hidden="true"`. |
+| `.samaritan-prompt__sr-text` | Visually hidden `aria-live` region for screen reader announcements. |
+
+## Notes
+
+- The `introDelay` only applies at the start of the loop, not between messages. Between messages, `pauseDuration` applies.
+- The cursor pulse animation uses the `samaritan-pulse` keyframe (defined in the component's global style). The cursor hides/shows during cycles via `cursorVisible` + opacity transition, not `display`.
+- `prefers-reduced-motion: reduce` suppresses the opacity transition on `.samaritan-prompt__content` and the `animation` on `.samaritan-prompt__cursor`. The `aria-live` announcements continue to fire regardless.
+- The `MessageConfig` type is exported from the component: `import type { MessageConfig } from 'srcdev-nuxt-components/components/02.molecules/samaritan-prompt/SamaritanPromptMixed.vue'`.

package/.claude/skills/css-animation-utilities.md

@@ -0,0 +1,87 @@
+# CSS Animation Utilities
+
+## Overview
+
+Scroll-driven animation utility classes bundled with the layer. Apply a class to any element to get a CSS-only, scroll-linked animation — no JavaScript required. All utilities use the [CSS Scroll-Driven Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) spec (`animation-timeline: view()`).
+
+**Browser support**: Chrome 115+, Firefox 110+, Safari 18+. No polyfill exists — use `@supports` for graceful degradation where needed.
+
+All utilities are wrapped in `@media (prefers-reduced-motion: no-preference)` — animations are automatically disabled for users who prefer reduced motion.
+
+## Available classes
+
+### `.animation-scroller-x`
+
+Scales and fades items relative to their position in a **horizontal scroll container** (carousel, horizontal list). Items at the edges are small and faint; items at the centre are full size and opaque.
+
+```css
+animation-timeline: view(x);
+```
+
+| Position | `opacity` | `scale` |
+|---|---|---|
+| Edges (0 %, 100 %) | 0.25 | 0.5 |
+| Centre (35 %–65 %) | 1 | 1 |
+
+#### Usage
+
+```html
+<!-- Scrollable container — overflow-x must be auto or scroll -->
+<div class="carousel-track" style="overflow-x: auto; display: flex;">
+  <div class="animation-scroller-x">Item 1</div>
+  <div class="animation-scroller-x">Item 2</div>
+  <div class="animation-scroller-x">Item 3</div>
+</div>
+```
+
+The animation is driven by the element's position inside its nearest scrollport on the x-axis. Add `.animation-scroller-x` to each **child** — not the container.
+
+---
+
+### `.entry-zoom-reveal`
+
+Fades and zooms an element in as it scrolls into the vertical viewport (bottom 30 % inset to top 5 %).
+
+```html
+<div class="entry-zoom-reveal">Content revealed on scroll</div>
+```
+
+- `fill: both` — element stays hidden before entry, visible after exit
+
+---
+
+### `.entry-slide-in`
+
+Slides an element up from 200 px below as it scrolls into view.
+
+```html
+<div class="entry-slide-in">Slides up on scroll</div>
+```
+
+---
+
+### `.entry-exit-blur`
+
+Blurs an element as it enters and exits the vertical viewport; sharp in the centre (45 %–55 %).
+
+```html
+<div class="entry-exit-blur">Sharp in view, blurred at edges</div>
+```
+
+---
+
+### `.auto-rotate`
+
+Rotates an element 0 → 360 ° as it scrolls through the vertical viewport.
+
+```html
+<div class="auto-rotate">
+  <img src="/logo.svg" alt="" />
+</div>
+```
+
+## Notes
+
+- All classes use `animation-timeline: view()` (vertical) **except** `.animation-scroller-x` which uses `view(x)`.
+- The `scroller` keyframe name used by `.animation-scroller-x` is global — avoid re-declaring `@keyframes scroller` in your own CSS.
+- Utility classes are included automatically when you extend the layer — no explicit import needed in your app.

package/.claude/skills/index.md

@@ -34,6 +34,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── component-local-style-override.md — styleClassPassthrough + scoped style block for per-usage visual customisation
 ├── component-prop-driven-container-layout.md — vary CSS grid layout inside @container queries using data-* attribute selectors
 ├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
+├── css-animation-utilities.md                — scroll-driven animation utility classes: scroller-x (carousel), entry-zoom-reveal, entry-slide-in, entry-exit-blur, auto-rotate
 ├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
 ├── component-export-types.md         — move inline component types to app/types/components/ barrel for consumer imports
 ├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
@@ -76,8 +77,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
     ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
-    ├── data-grid.md            — DataGrid: auto-fit responsive grid, $slots iteration, --data-grid-columns/gap tokens, semantic tag + aria
-    └── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
+    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
+    ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
+    └── samaritan-prompt-mixed.md — SamaritanPromptMixed: animated text prompt, typewriter/word-pulse effects, MessageConfig API, aria-live accessibility, CSS tokens
 ```
 
 ## Skill file template

package/app/assets/styles/setup/06.utility-classes/animations/_animation-scroller-x.css

@@ -0,0 +1,21 @@
+@keyframes scroller {
+  0%,
+  100% {
+    opacity: 0.25;
+    scale: 0.5;
+  }
+  35%,
+  65% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+/* Used to scroll scale elements when scrolling x-axis like a carousel. */
+
+@media (prefers-reduced-motion: no-preference) {
+  .animation-scroller-x {
+    animation: scroller linear both;
+    animation-timeline: view(x);
+  }
+}

package/app/assets/styles/setup/06.utility-classes/animations/_auto-rotate.css

@@ -7,7 +7,9 @@
   }
 }
 
-.auto-rotate {
-  animation: autoRotateAnimation;
-  animation-timeline: view();
+@media (prefers-reduced-motion: no-preference) {
+  .auto-rotate {
+    animation: autoRotateAnimation;
+    animation-timeline: view();
+  }
 }

package/app/assets/styles/setup/06.utility-classes/animations/_entry-exit-blur.css

@@ -1,6 +1,8 @@
-.entry-exit-blur {
-  animation: entryExitBlurAnimation linear both;
-  animation-timeline: view();
+@media (prefers-reduced-motion: no-preference) {
+  .entry-exit-blur {
+    animation: entryExitBlurAnimation linear both;
+    animation-timeline: view();
+  }
 }
 @keyframes entryExitBlurAnimation {
   0% {

package/app/assets/styles/setup/06.utility-classes/animations/_entry-zoom-reveal.css

@@ -9,7 +9,9 @@
   }
 }
 
-.entry-zoom-reveal {
-  animation: entryZoomRevealAnimation both;
-  animation-timeline: view(70% 5%);
+@media (prefers-reduced-motion: no-preference) {
+  .entry-zoom-reveal {
+    animation: entryZoomRevealAnimation both;
+    animation-timeline: view(70% 5%);
+  }
 }

package/app/assets/styles/setup/06.utility-classes/animations/index.css

@@ -1,4 +1,5 @@
-@import './_entry-zoom-reveal';
-@import './_entry-slide-in';
-@import './_entry-exit-blur';
-@import './_auto-rotate';
+@import "./_entry-zoom-reveal";
+@import "./_entry-slide-in";
+@import "./_entry-exit-blur";
+@import "./_auto-rotate";
+@import "./_animation-scroller-x.css";

package/app/components/01.atoms/grids/data-grid/AutoGrid.vue

@@ -0,0 +1,57 @@
+<template>
+  <component :is="tag" class="auto-grid" :class="[elementClasses, { 'is-responsive': isResponsive }]" :aria-labelledby="ariaLabelledby">
+    <slot v-for="(_, name) in $slots" :key="name" :name="name"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  isResponsive?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  isResponsive: false,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { ariaLabelledby } = useAriaLabelledById(props.tag);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .auto-grid {
+    --auto-grid-min-col-size-small: 250px;
+    --auto-grid-min-col-size-default: 300px;
+    --auto-grid-min-col-size-large: 350px;
+    --auto-grid-gap: 1rem;
+
+    display: grid;
+    gap: var(--auto-grid-gap);
+
+    &:not(.is-responsive) {
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+    }
+
+    &.is-responsive {
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-small), 100%), 1fr));
+
+      @container (width >= 768px) {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+      }
+
+      @container (width >= 1024px) {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-large), 100%), 1fr));
+      }
+    }
+  }
+}
+</style>