@nulib/clover 4.5.7 → 4.5.8

package/dist/components/Items/Items.mjs

@@ -105,6 +105,7 @@ function MemberItems({
       selected: items.findIndex((item) => item.id === manifestId),
       navigation: "id",
       rtl: direction === "right-to-left",
+      upward: direction === "bottom-to-top",
       language,
       request: clover.request,
       showSummary: true,
@@ -148,6 +149,7 @@ function ViewItems({
       selected: position,
       navigation: "id",
       rtl: direction === "right-to-left",
+      upward: direction === "bottom-to-top",
       language,
       request: clover.request,
       onActivate: (item, event) => {
@@ -182,6 +184,7 @@ function ItemsView({
   selected,
   navigation,
   rtl = false,
+  upward: bottomToTop = false,
   layout = "slider",
   orientation = "horizontal",
   thumbnailSize = 200,
@@ -214,6 +217,7 @@ function ItemsView({
   const contrast = useHighContrast(highContrast);
   const slider = layout === "slider";
   const vertical = slider && orientation === "vertical";
+  const upward = vertical && bottomToTop;
   const listbox = navigation === "id";
   const viewport = useRef(null);
   const masonry = layout === "masonry";
@@ -233,13 +237,15 @@ function ItemsView({
   const track = useScrollTrack({
     align: listbox ? "center" : "start",
     itemCount: items.length,
-    axis: vertical ? "y" : "x"
+    axis: vertical ? "y" : "x",
+    upward
   });
   const held = useRef(void 0);
   useEffect(() => () => window.clearTimeout(held.current), []);
   const roving = useRovingFocus(items.length, selected, {
     orientation: vertical ? "vertical" : layout === "slider" ? "horizontal" : layout === "list" ? "vertical" : "both",
     rtl,
+    upward,
     onActivate: (index, event) => onActivate(items[index], event),
     onMove: followFocus ? (index, event) => {
       window.clearTimeout(held.current);
@@ -306,7 +312,7 @@ function ItemsView({
   const positionLang = (item) => positioned(item) ? langOf("canvasPosition") : void 0;
   const trackStyle = slider ? {
     display: "flex",
-    flexDirection: vertical ? "column" : void 0,
+    flexDirection: upward ? "column-reverse" : vertical ? "column" : void 0,
     margin: 0,
     padding: 0,
     listStyle: "none"
@@ -348,7 +354,7 @@ function ItemsView({
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  d: vertical ? step === "next" ? "M3 6l5 5 5-5" : "M3 10l5-5 5 5" : step === "next" !== rtl ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+                  d: vertical ? step === "next" !== upward ? "M3 6l5 5 5-5" : "M3 10l5-5 5 5" : step === "next" !== rtl ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
@@ -371,6 +377,7 @@ function ItemsView({
       className: join("clover-items", className),
       "data-layout": layout,
       "data-orientation": vertical ? "vertical" : void 0,
+      "data-upward": upward || void 0,
       "data-navigation": navigation,
       ...highContrastProps(contrast),
       ...rest,

package/dist/styles/default.css

@@ -1 +1 @@
-@layer clover{.clover-template-default{--clover-body-height: min(65vh, 40rem);display:flex;flex-direction:column;color:var(--clover-color-primary, #1a1d1e)}@supports (height: 1svh){.clover-template-default{--clover-body-height: min(65svh, 40rem)}}.clover-template-default:is([data-fill],:fullscreen){--clover-body-height: auto;height:100%;min-height:min-content}.clover-template-default:is([data-fill],:fullscreen)>.clover-template-default-panes{flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-body{flex:1 1 0;min-height:16rem}.clover-template-default-header{display:flex;align-items:center;gap:var(--clover-space-s);padding:var(--clover-inset)}.clover-template-default-header:empty{display:none}@media (width < 31rem){.clover-template-default-header,.clover-template-default-rail{--clover-inset: var(--clover-space-m)}}.clover-template-default-pager{flex:none;padding-block:0}.clover-template-default-header:has(>.clover-template-default-pager){flex-wrap:wrap;row-gap:var(--clover-space-xs)}.clover-template-default-header:has(>.clover-template-default-pager)>:is(.clover-template-default-title,.clover-template-default-pager){align-self:last baseline}.clover-template-default-header:has(>.clover-template-default-collection-row){display:grid;grid-template-columns:minmax(0,1fr) fit-content(38.2%);row-gap:var(--clover-space-xs)}.clover-template-default-header>:is(.clover-template-default-title,.clover-template-default-collection-row){grid-column:1}.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:none}.clover-template-default-collection-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-xs) var(--clover-space-s);min-width:0}.clover-template-default-collection{min-width:0;margin:0;overflow-wrap:anywhere;color:var(--clover-color-primary-muted, #26292b);font-size:inherit}.clover-template-default-provider{flex:0 1 auto;max-width:38.2%;margin-inline-start:auto}@container clover-template-default-main (width < 36rem){.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-row:1;align-self:start}.clover-template-default-header>.clover-template-default-collection-row{grid-column:1 / -1}}@container clover-template-default-main (width < 26rem){.clover-template-default:has(.clover-template-default-panel[data-about]) .clover-template-default-provider{display:none}}.clover-template-default-panes{position:relative}.clover-template-default-main{display:flex;flex-direction:column;container:clover-template-default-main / inline-size}.clover-template-panes[data-panel=over]>.clover-template-default-main{isolation:isolate}.clover-template-panes{position:relative}.clover-template-panel{contain:size;overflow-y:auto;background-color:var(--clover-color-secondary, #fff)}.clover-template-panel[hidden]{display:none}.clover-template-panes>.clover-template-panel-handle{translate:-1.5px 0}.clover-template-panes:dir(rtl)>.clover-template-panel-handle{translate:1.5px 0}.clover-template-default-panes:dir(ltr) .clover-items-viewport{margin-right:0}.clover-template-default-panes:dir(rtl) .clover-items-viewport{margin-left:0}.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame:not([dir=rtl]):after,.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame[dir=rtl]:before{right:0}.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame:not([dir=rtl]):before,.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame[dir=rtl]:after{left:0}.clover-template-panes[data-panel=over]{overflow:clip}.clover-template-panes[data-panel=over]>.clover-template-drawer{position:absolute;inset-block:0;inset-inline-end:0;z-index:4;width:min(24rem,calc(100% - var(--clover-space-2xl)));max-width:none;max-height:none;border-inline-start:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-inner: left;--clover-template-toward: -1;--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));transform:var(--clover-template-out);transition:transform .24s cubic-bezier(.16,1,.3,1)}.clover-template-panes[data-panel=over]>.clover-template-drawer:dir(rtl){--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]{inset-inline:0 auto;border-inline-start:0;border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]:dir(rtl){--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));--clover-template-inner: left;--clover-template-toward: -1}.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-float{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent );background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat var(--clover-template-inner) var(--clover-space-2xs) center / 3px var(--clover-control),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:calc(var(--clover-template-toward) * var(--clover-space-s)) 0 var(--clover-space-l) #0000001f}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-open=true]{transform:none}.clover-template-scrim{position:absolute;inset:0;z-index:3;background-color:#0003;opacity:0;cursor:pointer;transition:opacity .24s ease}.clover-template-scrim[data-open=true]{opacity:1}@media (prefers-reduced-motion: reduce){.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-scrim{transition:none}}.clover-template-default-rail{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset)}.clover-template-default-rail>.clover-items{margin-inline-end:calc(-1 * var(--clover-inset))}.clover-template-default-rail .clover-items-viewport{margin-inline-end:0}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-prev,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-next{left:calc(-1 * var(--clover-space-s))}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-next,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-prev{right:var(--clover-inset)}.clover-template-default-rail:not(:has(.clover-items,.clover-pager-position)){display:none}.clover-template-default-rail-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--clover-space-s)}.clover-template-default-titles{min-width:0;margin:0;overflow-wrap:anywhere}.clover-template-default-titles>.clover-template-default-titles-dot{margin-inline:var(--clover-space-xs);color:var(--clover-color-primary-muted, #26292b)}.clover-template-default-rail-header .clover-pager-position{flex-shrink:0;margin-inline-start:auto;font-size:var(--clover-text-s)}.clover-template-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-spine>*{position:absolute;top:calc(var(--clover-template-spine-top, 0px) + var(--clover-inset));inset-inline-start:-1.5px;translate:-50%}.clover-template-panes:has(>.clover-template-spine)>:first-child .clover-canvas>.clover-canvas-controls[data-fit]{inset-inline-end:calc(var(--clover-control) / 2 - 1.5px + var(--clover-space-xs))}.clover-template-panes .clover-template-spine>*{transition-property:background-color,color,outline-color}.clover-root[data-status=idle] .clover-template-spine{visibility:hidden}.clover-template-spine:dir(rtl)>*{translate:50%}}
+@layer clover{.clover-template-default{--clover-body-height: min(65vh, 40rem);display:flex;flex-direction:column;color:var(--clover-color-primary, #1a1d1e)}@supports (height: 1svh){.clover-template-default{--clover-body-height: min(65svh, 40rem)}}.clover-template-default:is([data-fill],:fullscreen){--clover-body-height: auto;height:100%;min-height:min-content}.clover-template-default:is([data-fill],:fullscreen)>.clover-template-default-panes{flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-body{flex:1 1 0;min-height:16rem}.clover-template-default-header{display:flex;align-items:center;gap:var(--clover-space-s);padding:var(--clover-inset)}.clover-template-default-header:empty{display:none}@media (width < 31rem){.clover-template-default-header,.clover-template-default-rail{--clover-inset: var(--clover-space-m)}}.clover-template-default-pager{flex:none;padding-block:0}.clover-template-default-header:has(>.clover-template-default-pager){flex-wrap:wrap;row-gap:var(--clover-space-xs)}.clover-template-default-header:has(>.clover-template-default-pager)>:is(.clover-template-default-title,.clover-template-default-pager){align-self:last baseline}.clover-template-default-header:has(>.clover-template-default-collection-row){display:grid;grid-template-columns:minmax(0,1fr) fit-content(38.2%);row-gap:var(--clover-space-xs)}.clover-template-default-header>:is(.clover-template-default-title,.clover-template-default-collection-row){grid-column:1}.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:none}.clover-template-default-collection-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-xs) var(--clover-space-s);min-width:0}.clover-template-default-collection{min-width:0;margin:0;overflow-wrap:anywhere;color:var(--clover-color-primary-muted, #26292b);font-size:inherit}.clover-template-default-provider{flex:0 1 auto;max-width:38.2%;margin-inline-start:auto}@container clover-template-default-main (width < 36rem){.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-row:1;align-self:start}.clover-template-default-header>.clover-template-default-collection-row{grid-column:1 / -1}}@container clover-template-default-main (width < 26rem){.clover-template-default:has(.clover-template-default-panel[data-about]) .clover-template-default-provider{display:none}}.clover-template-default-panes{position:relative}.clover-template-default-main{display:flex;flex-direction:column;container:clover-template-default-main / inline-size}.clover-template-panes[data-panel=over]>.clover-template-default-main{isolation:isolate}.clover-template-panes{position:relative}.clover-template-panel{contain:size;overflow-y:auto;background-color:var(--clover-color-secondary, #fff)}.clover-template-panel[hidden]{display:none}.clover-template-panes>.clover-template-panel-handle{translate:-1.5px 0}.clover-template-panes:dir(rtl)>.clover-template-panel-handle{translate:1.5px 0}.clover-template-default-panes:dir(ltr) .clover-items:not([data-orientation=vertical]) .clover-items-viewport{margin-right:0}.clover-template-default-panes:dir(rtl) .clover-items:not([data-orientation=vertical]) .clover-items-viewport{margin-left:0}.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame:not([dir=rtl]):after,.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame[dir=rtl]:before{right:0}.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame:not([dir=rtl]):before,.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame[dir=rtl]:after{left:0}.clover-template-panes[data-panel=over]{overflow:clip}.clover-template-panes[data-panel=over]>.clover-template-drawer{position:absolute;inset-block:0;inset-inline-end:0;z-index:4;width:min(24rem,calc(100% - var(--clover-space-2xl)));max-width:none;max-height:none;border-inline-start:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-inner: left;--clover-template-toward: -1;--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));transform:var(--clover-template-out);transition:transform .24s cubic-bezier(.16,1,.3,1)}.clover-template-panes[data-panel=over]>.clover-template-drawer:dir(rtl){--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]{inset-inline:0 auto;border-inline-start:0;border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]:dir(rtl){--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));--clover-template-inner: left;--clover-template-toward: -1}.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-float{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent );background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat var(--clover-template-inner) var(--clover-space-2xs) center / 3px var(--clover-control),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:calc(var(--clover-template-toward) * var(--clover-space-s)) 0 var(--clover-space-l) #0000001f}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-open=true]{transform:none}.clover-template-scrim{position:absolute;inset:0;z-index:3;background-color:#0003;opacity:0;cursor:pointer;transition:opacity .24s ease}.clover-template-scrim[data-open=true]{opacity:1}@media (prefers-reduced-motion: reduce){.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-scrim{transition:none}}.clover-template-default-rail{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset)}.clover-template-default-rail:not([data-orientation=vertical])>.clover-items{margin-inline-end:calc(-1 * var(--clover-inset))}.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-viewport{margin-inline-end:0}.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-prev,.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame[dir=rtl]>button.clover-items-scroll-next{left:calc(-1 * var(--clover-space-s))}.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-next,.clover-template-default-rail:not([data-orientation=vertical]) .clover-items-frame[dir=rtl]>button.clover-items-scroll-prev{right:var(--clover-inset)}.clover-template-default-rail:not(:has(.clover-items,.clover-pager-position)){display:none}.clover-template-default-views{display:contents}.clover-template-default-views[data-orientation=vertical]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-views[data-orientation=vertical]{flex:1 1 0;min-height:16rem}.clover-template-default-views[data-orientation=vertical]>.clover-template-default-body{grid-area:1 / 2}.clover-template-default-views>.clover-template-default-rail[data-orientation=vertical]{grid-area:1 / 1;width:var(--clover-template-default-rail-width, 9rem);contain:size}.clover-template-default-views[data-orientation=vertical]>.clover-template-default-rail-header{grid-area:2 / 2;padding:var(--clover-inset)}.clover-template-default-views[data-orientation=vertical]>.clover-template-default-rail-header:not(:has(.clover-pager-position)){display:none}@container clover-template-default-main (width < 36rem){.clover-template-default-rail[data-orientation=vertical]{--clover-template-default-rail-width: 6rem}}.clover-template-default-rail[data-orientation=vertical]>.clover-items{flex:1 1 0;min-height:0}.clover-template-default-rail-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--clover-space-s)}.clover-template-default-titles{min-width:0;margin:0;overflow-wrap:anywhere}.clover-template-default-titles>.clover-template-default-titles-dot{margin-inline:var(--clover-space-xs);color:var(--clover-color-primary-muted, #26292b)}.clover-template-default-rail-header .clover-pager-position{flex-shrink:0;margin-inline-start:auto;font-size:var(--clover-text-s)}.clover-template-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-spine>*{position:absolute;top:calc(var(--clover-template-spine-top, 0px) + var(--clover-inset));inset-inline-start:-1.5px;translate:-50%}.clover-template-panes:has(>.clover-template-spine)>:first-child .clover-canvas>.clover-canvas-controls[data-fit]{inset-inline-end:calc(var(--clover-control) / 2 - 1.5px + var(--clover-space-xs))}.clover-template-panes .clover-template-spine>*{transition-property:background-color,color,outline-color}.clover-root[data-status=idle] .clover-template-spine{visibility:hidden}.clover-template-spine:dir(rtl)>*{translate:50%}}

package/dist/styles/items.css

@@ -1 +1 @@
-@layer clover{.clover-items{--clover-items-ring-room: 4px;--clover-items-picture-height: var(--clover-items-height, 8rem);color:var(--clover-color-primary, #1a1d1e)}.clover-items-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--clover-space-xs) var(--clover-space-m);margin-bottom:var(--clover-space-s)}.clover-items-description{flex:1 0 100%;order:3;margin:0;color:var(--clover-color-primary-muted, #26292b)}.clover-items-homepage{margin-inline-start:auto;color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}.clover-items-track{margin:0;padding:0;list-style:none;gap:var(--clover-items-gap, var(--clover-space-m))}.clover-items-viewport{margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);scroll-padding-inline:var(--clover-items-ring-room);scrollbar-width:none}.clover-items[data-layout=slider] .clover-items-viewport{padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px));scroll-padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px))}.clover-items-viewport::-webkit-scrollbar{display:none}.clover-items-viewport[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider] .clover-items-frame{timeline-scope:--clover-items-track}.clover-items[data-layout=slider] .clover-items-viewport{scroll-timeline:--clover-items-track inline}.clover-items[data-layout=slider] .clover-items-frame:before,.clover-items[data-layout=slider] .clover-items-frame:after{content:"";position:absolute;top:var(--clover-items-ring-room);z-index:1;width:var(--clover-space-s);height:var(--clover-items-picture-height);background:linear-gradient(var(--clover-items-shade),rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-items-track}.clover-items[data-layout=slider] .clover-items-frame:before{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));animation-range:0 var(--clover-space-m)}.clover-items[data-layout=slider] .clover-items-frame:after{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));animation-direction:reverse;animation-range:calc(100% - var(--clover-space-m)) 100%}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:before{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));left:auto}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:after{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));right:auto}}.clover-items[data-layout=list] .clover-items-track{display:flex;flex-direction:column}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--clover-items-size, 10rem)),1fr))}.clover-items-item{position:relative;cursor:pointer}.clover-items-link{display:block;color:inherit;text-decoration:none}:is(.clover-items-item[role=option],.clover-items-link){margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);outline:none}.clover-items:not([data-layout=slider]) :is(.clover-items-viewport,.clover-items-item[role=option],.clover-items-link){margin-inline:0;padding-inline:0}.clover-items-figure{display:grid;grid-template-columns:repeat(var(--parts, 1),auto);justify-content:start;gap:var(--clover-space-xs) 0;margin:0}.clover-items-pictures{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;border-radius:var(--clover-radius, 3px);outline:3px solid var(--ring-color, transparent);outline-offset:1px;transition:outline-color .2s cubic-bezier(.16,1,.3,1)}.clover-items-picture{position:relative;display:block;overflow:hidden;background-color:var(--clover-color-secondary-muted, #f1f1f1)}.clover-items-picture img{display:block;opacity:0;transition:opacity .3s ease}.clover-items-picture[data-loaded=true] img{opacity:1}.clover-items-picture[data-empty]{display:grid;place-items:center;aspect-ratio:var(--clover-items-ratio, 1);color:var(--clover-color-primary-muted, #26292b)}.clover-items-picture[data-empty]>svg{width:33%;max-width:var(--clover-space-xl);height:auto;fill:currentColor}.clover-items-pictures>.clover-items-picture:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.clover-items-pictures>.clover-items-picture:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.clover-items-duration{position:absolute;inset-inline-end:var(--clover-space-xs);bottom:var(--clover-space-xs);padding:var(--clover-space-3xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:#000000b8;color:#fff;font-size:var(--clover-text-xs);font-variant-numeric:tabular-nums}.clover-items-caption{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--clover-space-3xs) 0;font-size:var(--clover-text-s)}.clover-items-label{position:relative;contain:inline-size}.clover-items:is([data-layout=slider],[data-layout=grid],[data-layout=masonry]) .clover-items-label-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-items-lines, 3);line-clamp:var(--clover-items-lines, 3)}.clover-items-label-full{position:absolute;inset-inline:0;bottom:0;z-index:1;padding-block-start:var(--clover-space-2xs);background-color:var(--clover-color-secondary, #fff);box-shadow:0 calc(-1 * var(--clover-space-2xs)) var(--clover-space-s) #00000029;pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):is(:hover,:focus-visible):not([data-full-hidden]) .clover-items-label[data-clamped]>.clover-items-label-full{display:block}@media (forced-colors: active){.clover-items-label-full{border:1px solid CanvasText}}.clover-items-date{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-xs)}.clover-items-summary{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b)}.clover-items[data-layout=slider] .clover-items-picture[data-empty],.clover-items[data-layout=slider] .clover-items-picture img{width:auto;height:var(--clover-items-picture-height)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-pictures{aspect-ratio:1;overflow:hidden}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture{min-width:0}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture img{width:100%;height:100%;object-fit:contain}.clover-items[data-layout=masonry] .clover-items-viewport[data-masonry] .clover-items-track{grid-auto-rows:4px;row-gap:0;align-items:start}.clover-items[data-layout=masonry] .clover-items-pictures{aspect-ratio:auto}.clover-items[data-layout=masonry] .clover-items-picture img{height:auto}.clover-items[data-layout=list] .clover-items-figure{grid-template-columns:auto 1fr;align-items:start;gap:0 var(--clover-space-s)}.clover-items[data-layout=list] .clover-items-pictures{grid-column:1;grid-template-columns:repeat(var(--parts, 1),auto);gap:0}.clover-items[data-layout=list] .clover-items-caption{grid-column:2;grid-template-columns:none}.clover-items[data-layout=list] .clover-items-label{contain:none}.clover-items[data-layout=list] .clover-items-picture img{width:auto;height:var(--clover-space-xl)}.clover-items[data-layout=list] .clover-items-picture[data-empty]{height:var(--clover-space-xl)}:is(.clover-items-item[role=option],.clover-items-link):hover{--ring-color: color-mix( in srgb, var(--clover-color-accent, #0065c3) 50%, transparent )}.clover-items-item[aria-selected=true]{--ring-color: var(--clover-color-accent, #0065c3)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: var(--clover-color-primary, #1a1d1e)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{position:absolute;inset:0;border-radius:inherit;outline:2px solid var(--clover-color-secondary, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--clover-color-primary, #1a1d1e);content:"";pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{border-radius:var(--clover-radius, 3px);outline:3px solid var(--clover-color-primary, #1a1d1e);outline-offset:calc(1px - var(--clover-items-ring-room))}@media (forced-colors: active){.clover-items-pictures{outline-color:var(--ring-color, Canvas)}.clover-items-item[aria-selected=true]{--ring-color: Highlight}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: CanvasText}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{outline-color:CanvasText}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{outline-color:CanvasText}}.clover-items-item[aria-selected=true] .clover-items-label{color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );font-weight:600}:is(button.clover-items-scroll-prev,button.clover-items-scroll-next){position:absolute;top:calc(var(--clover-items-picture-height) / 2);z-index:2;translate:0 -50%;box-shadow:0 1px 4px #00000040}.clover-items-scroll-prev{inset-inline-start:var(--clover-space-2xs)}.clover-items-scroll-next{inset-inline-end:var(--clover-space-2xs)}.clover-items[data-layout=slider][data-orientation=vertical]{display:flex;flex-direction:column;height:100%}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame{flex:1;min-height:0}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{box-sizing:border-box;height:calc(100% + 2 * var(--clover-items-ring-room));padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) var(--clover-items-ring-room);scroll-padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) 0}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items[data-orientation=vertical] .clover-items-picture img,.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{width:100%;height:auto}.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{aspect-ratio:4 / 3}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{scroll-timeline:--clover-items-track block}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before,.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{left:0;right:0;width:auto;height:var(--clover-space-s);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent)}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before{--clover-items-shade: to bottom;top:calc(-1 * var(--clover-items-ring-room))}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{--clover-items-shade: to top;top:auto;bottom:calc(-1 * var(--clover-items-ring-room))}}.clover-items[data-orientation=vertical] :is(button.clover-items-scroll-prev,button.clover-items-scroll-next){inset-inline:auto;left:50%;translate:-50% 0}.clover-items[data-orientation=vertical] button.clover-items-scroll-prev{top:var(--clover-space-2xs)}.clover-items[data-orientation=vertical] button.clover-items-scroll-next{top:auto;bottom:var(--clover-space-2xs)}.clover-pager{display:flex;align-items:center;justify-content:center;gap:var(--clover-space-s);padding-block:var(--clover-space-s)}.clover-pager-position{display:inline-grid;justify-items:end;font-variant-numeric:tabular-nums;color:var(--clover-color-primary-muted, #26292b)}.clover-pager[data-direction=right-to-left] .clover-pager-position{justify-items:start}.clover-pager-position>[aria-hidden]{grid-area:1 / 1}.clover-pager-position>.clover-pager-room[hidden]{display:block;visibility:hidden}.clover-pager:has(>.clover-pager-count){position:relative;z-index:5}.clover-pager-count{position:relative}.clover-pager:has(>.clover-pager-count)>button,.clover-pager-count>.clover-pager-count-button{position:relative;z-index:1}.clover-pager-count-button{display:inline-flex;align-items:center;gap:var(--clover-space-2xs);min-height:var(--clover-space-l);padding:0 var(--clover-space-xs);border:0;border-radius:var(--clover-radius-pill, 2rem);background:none;color:var(--clover-color-primary-muted, #26292b);font:inherit;cursor:pointer}.clover-pager-count-button .clover-pager-position{color:inherit}.clover-pager-count-button .clover-pager-position>span{grid-area:1 / 1}.clover-pager-count-button:is(:hover,:focus-visible,[aria-expanded=true]){color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) )}.clover-pager-count-button:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-pager-count>.clover-pager-menu{z-index:0;top:calc(-1 * var(--clover-space-m));inset-inline-start:calc(-1 * var(--clover-space-m));width:min(20rem,calc(100vw - 2 * var(--clover-space-m)));max-height:min(24rem,60vh);max-height:min(24rem,60dvh);--clover-pager-menu-head: calc( var(--clover-space-m) + var(--clover-space-l) + var(--clover-space-m) );padding:var(--clover-space-m);padding-block:var(--clover-pager-menu-head) 0}.clover-pager-count>.clover-pager-menu{display:flex;flex-direction:column;overflow:hidden}.clover-pager-count>.clover-pager-menu>.clover-pager-list{min-height:0;margin:calc(-1 * var(--clover-items-ring-room, 4px));margin-block-end:0;padding:var(--clover-items-ring-room, 4px);padding-block-end:var(--clover-space-m);overflow-y:auto;overscroll-behavior:contain}@supports (timeline-scope: --clover-pager-list){.clover-pager-count>.clover-pager-menu{timeline-scope:--clover-pager-list}.clover-pager-count>.clover-pager-menu>.clover-pager-list{scroll-timeline:--clover-pager-list block}.clover-pager-count>.clover-pager-menu:before{content:"";position:absolute;z-index:1;top:calc(var(--clover-pager-menu-head) - var(--clover-items-ring-room, 4px));inset-inline:calc(var(--clover-space-m) - var(--clover-items-ring-room, 4px));height:var(--clover-space-s);background:linear-gradient(rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-pager-list;animation-range:0 var(--clover-space-m)}}.clover-pager[data-direction=right-to-left] .clover-pager-count>.clover-pager-menu{inset-inline:auto calc(-1 * var(--clover-space-m))}.clover-pager-count-button[aria-expanded=true] svg{rotate:180deg}.clover-pager-list.clover-collection>.clover-items{--clover-items-gap: var(--clover-space-m);margin:0}.clover-pager[data-size=small]{gap:var(--clover-space-2xs);padding-block:0}.clover-pager[data-size=small] .clover-pager-count-button{font-size:var(--clover-text-xs);line-height:1}.clover-pager[data-size=small] .clover-pager-position{font-weight:600}}
+@layer clover{.clover-items{--clover-items-ring-room: 4px;--clover-items-picture-height: var(--clover-items-height, 8rem);color:var(--clover-color-primary, #1a1d1e)}.clover-items-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--clover-space-xs) var(--clover-space-m);margin-bottom:var(--clover-space-s)}.clover-items-description{flex:1 0 100%;order:3;margin:0;color:var(--clover-color-primary-muted, #26292b)}.clover-items-homepage{margin-inline-start:auto;color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}.clover-items-track{margin:0;padding:0;list-style:none;gap:var(--clover-items-gap, var(--clover-space-m))}.clover-items-viewport{margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);scroll-padding-inline:var(--clover-items-ring-room);scrollbar-width:none}.clover-items[data-layout=slider] .clover-items-viewport{padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px));scroll-padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px))}.clover-items-viewport::-webkit-scrollbar{display:none}.clover-items-viewport[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider] .clover-items-frame{timeline-scope:--clover-items-track}.clover-items[data-layout=slider] .clover-items-viewport{scroll-timeline:--clover-items-track inline}.clover-items[data-layout=slider] .clover-items-frame:before,.clover-items[data-layout=slider] .clover-items-frame:after{content:"";position:absolute;top:var(--clover-items-ring-room);z-index:1;width:var(--clover-space-s);height:var(--clover-items-picture-height);background:linear-gradient(var(--clover-items-shade),rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-items-track}.clover-items[data-layout=slider] .clover-items-frame:before{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));animation-range:0 var(--clover-space-m)}.clover-items[data-layout=slider] .clover-items-frame:after{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));animation-direction:reverse;animation-range:calc(100% - var(--clover-space-m)) 100%}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:before{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));left:auto}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:after{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));right:auto}}.clover-items[data-layout=list] .clover-items-track{display:flex;flex-direction:column}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--clover-items-size, 10rem)),1fr))}.clover-items-item{position:relative;cursor:pointer}.clover-items-link{display:block;color:inherit;text-decoration:none}:is(.clover-items-item[role=option],.clover-items-link){margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);outline:none}.clover-items:not([data-layout=slider]) :is(.clover-items-viewport,.clover-items-item[role=option],.clover-items-link){margin-inline:0;padding-inline:0}.clover-items-figure{display:grid;grid-template-columns:repeat(var(--parts, 1),auto);justify-content:start;gap:var(--clover-space-xs) 0;margin:0}.clover-items-pictures{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;border-radius:var(--clover-radius, 3px);outline:3px solid var(--ring-color, transparent);outline-offset:1px;transition:outline-color .2s cubic-bezier(.16,1,.3,1)}.clover-items-picture{position:relative;display:block;overflow:hidden;background-color:var(--clover-color-secondary-muted, #f1f1f1)}.clover-items-picture img{display:block;opacity:0;transition:opacity .3s ease}.clover-items-picture[data-loaded=true] img{opacity:1}.clover-items-picture[data-empty]{display:grid;place-items:center;aspect-ratio:var(--clover-items-ratio, 1);color:var(--clover-color-primary-muted, #26292b)}.clover-items-picture[data-empty]>svg{width:33%;max-width:var(--clover-space-xl);height:auto;fill:currentColor}.clover-items-pictures>.clover-items-picture:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.clover-items-pictures>.clover-items-picture:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.clover-items-duration{position:absolute;inset-inline-end:var(--clover-space-xs);bottom:var(--clover-space-xs);padding:var(--clover-space-3xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:#000000b8;color:#fff;font-size:var(--clover-text-xs);font-variant-numeric:tabular-nums}.clover-items-caption{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--clover-space-3xs) 0;font-size:var(--clover-text-s)}.clover-items-label{position:relative;contain:inline-size}.clover-items:is([data-layout=slider],[data-layout=grid],[data-layout=masonry]) .clover-items-label-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-items-lines, 3);line-clamp:var(--clover-items-lines, 3)}.clover-items-label-full{position:absolute;inset-inline:0;bottom:0;z-index:1;padding-block-start:var(--clover-space-2xs);background-color:var(--clover-color-secondary, #fff);box-shadow:0 calc(-1 * var(--clover-space-2xs)) var(--clover-space-s) #00000029;pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):is(:hover,:focus-visible):not([data-full-hidden]) .clover-items-label[data-clamped]>.clover-items-label-full{display:block}@media (forced-colors: active){.clover-items-label-full{border:1px solid CanvasText}}.clover-items-date{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-xs)}.clover-items-summary{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b)}.clover-items[data-layout=slider] .clover-items-picture[data-empty],.clover-items[data-layout=slider] .clover-items-picture img{width:auto;height:var(--clover-items-picture-height)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-pictures{aspect-ratio:1;overflow:hidden}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture{min-width:0}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture img{width:100%;height:100%;object-fit:contain}.clover-items[data-layout=masonry] .clover-items-viewport[data-masonry] .clover-items-track{grid-auto-rows:4px;row-gap:0;align-items:start}.clover-items[data-layout=masonry] .clover-items-pictures{aspect-ratio:auto}.clover-items[data-layout=masonry] .clover-items-picture img{height:auto}.clover-items[data-layout=list] .clover-items-figure{grid-template-columns:auto 1fr;align-items:start;gap:0 var(--clover-space-s)}.clover-items[data-layout=list] .clover-items-pictures{grid-column:1;grid-template-columns:repeat(var(--parts, 1),auto);gap:0}.clover-items[data-layout=list] .clover-items-caption{grid-column:2;grid-template-columns:none}.clover-items[data-layout=list] .clover-items-label{contain:none}.clover-items[data-layout=list] .clover-items-picture img{width:auto;height:var(--clover-space-xl)}.clover-items[data-layout=list] .clover-items-picture[data-empty]{height:var(--clover-space-xl)}:is(.clover-items-item[role=option],.clover-items-link):hover{--ring-color: color-mix( in srgb, var(--clover-color-accent, #0065c3) 50%, transparent )}.clover-items-item[aria-selected=true]{--ring-color: var(--clover-color-accent, #0065c3)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: var(--clover-color-primary, #1a1d1e)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{position:absolute;inset:0;border-radius:inherit;outline:2px solid var(--clover-color-secondary, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--clover-color-primary, #1a1d1e);content:"";pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{border-radius:var(--clover-radius, 3px);outline:3px solid var(--clover-color-primary, #1a1d1e);outline-offset:calc(1px - var(--clover-items-ring-room))}@media (forced-colors: active){.clover-items-pictures{outline-color:var(--ring-color, Canvas)}.clover-items-item[aria-selected=true]{--ring-color: Highlight}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: CanvasText}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{outline-color:CanvasText}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{outline-color:CanvasText}}.clover-items-item[aria-selected=true] .clover-items-label{color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );font-weight:600}:is(button.clover-items-scroll-prev,button.clover-items-scroll-next){position:absolute;top:calc(var(--clover-items-picture-height) / 2);z-index:2;translate:0 -50%;box-shadow:0 1px 4px #00000040}.clover-items-scroll-prev{inset-inline-start:var(--clover-space-2xs)}.clover-items-scroll-next{inset-inline-end:var(--clover-space-2xs)}.clover-items[data-layout=slider][data-orientation=vertical]{display:flex;flex-direction:column;height:100%}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame{--clover-items-ends: calc(var(--clover-control) + var(--clover-space-m));flex:1;min-height:0;padding-block:var(--clover-items-ends)}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{box-sizing:border-box;height:calc(100% + 2 * var(--clover-items-ring-room));padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) var(--clover-items-ring-room);scroll-padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) 0}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items[data-orientation=vertical] .clover-items-picture img,.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{width:100%;height:auto}.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{aspect-ratio:4 / 3}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{scroll-timeline:--clover-items-track block}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before,.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{left:0;right:0;width:auto;height:var(--clover-space-s);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent)}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before{--clover-items-shade: to bottom;top:calc(var(--clover-items-ends) - var(--clover-items-ring-room))}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{--clover-items-shade: to top;top:auto;bottom:calc(var(--clover-items-ends) - var(--clover-items-ring-room))}}.clover-items[data-orientation=vertical] :is(button.clover-items-scroll-prev,button.clover-items-scroll-next){inset-inline:auto;left:50%;translate:-50% 0}.clover-items[data-orientation=vertical] button.clover-items-scroll-prev,.clover-items[data-orientation=vertical][data-upward] button.clover-items-scroll-next{top:0;bottom:auto}.clover-items[data-orientation=vertical] button.clover-items-scroll-next,.clover-items[data-orientation=vertical][data-upward] button.clover-items-scroll-prev{top:auto;bottom:0}.clover-pager{display:flex;align-items:center;justify-content:center;gap:var(--clover-space-s);padding-block:var(--clover-space-s)}.clover-pager-position{display:inline-grid;justify-items:end;font-variant-numeric:tabular-nums;color:var(--clover-color-primary-muted, #26292b)}.clover-pager[data-direction=right-to-left] .clover-pager-position{justify-items:start}.clover-pager-position>[aria-hidden]{grid-area:1 / 1}.clover-pager-position>.clover-pager-room[hidden]{display:block;visibility:hidden}.clover-pager:has(>.clover-pager-count){position:relative;z-index:5}.clover-pager-count{position:relative}.clover-pager:has(>.clover-pager-count)>button,.clover-pager-count>.clover-pager-count-button{position:relative;z-index:1}.clover-pager-count-button{display:inline-flex;align-items:center;gap:var(--clover-space-2xs);min-height:var(--clover-space-l);padding:0 var(--clover-space-xs);border:0;border-radius:var(--clover-radius-pill, 2rem);background:none;color:var(--clover-color-primary-muted, #26292b);font:inherit;cursor:pointer}.clover-pager-count-button .clover-pager-position{color:inherit}.clover-pager-count-button .clover-pager-position>span{grid-area:1 / 1}.clover-pager-count-button:is(:hover,:focus-visible,[aria-expanded=true]){color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) )}.clover-pager-count-button:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-pager-count>.clover-pager-menu{z-index:0;top:calc(-1 * var(--clover-space-m));inset-inline-start:calc(-1 * var(--clover-space-m));width:min(20rem,calc(100vw - 2 * var(--clover-space-m)));max-height:min(24rem,60vh);max-height:min(24rem,60dvh);--clover-pager-menu-head: calc( var(--clover-space-m) + var(--clover-space-l) + var(--clover-space-m) );padding:var(--clover-space-m);padding-block:var(--clover-pager-menu-head) 0}.clover-pager-count>.clover-pager-menu{display:flex;flex-direction:column;overflow:hidden}.clover-pager-count>.clover-pager-menu>.clover-pager-list{min-height:0;margin:calc(-1 * var(--clover-items-ring-room, 4px));margin-block-end:0;padding:var(--clover-items-ring-room, 4px);padding-block-end:var(--clover-space-m);overflow-y:auto;overscroll-behavior:contain}@supports (timeline-scope: --clover-pager-list){.clover-pager-count>.clover-pager-menu{timeline-scope:--clover-pager-list}.clover-pager-count>.clover-pager-menu>.clover-pager-list{scroll-timeline:--clover-pager-list block}.clover-pager-count>.clover-pager-menu:before{content:"";position:absolute;z-index:1;top:calc(var(--clover-pager-menu-head) - var(--clover-items-ring-room, 4px));inset-inline:calc(var(--clover-space-m) - var(--clover-items-ring-room, 4px));height:var(--clover-space-s);background:linear-gradient(rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-pager-list;animation-range:0 var(--clover-space-m)}}.clover-pager[data-direction=right-to-left] .clover-pager-count>.clover-pager-menu{inset-inline:auto calc(-1 * var(--clover-space-m))}.clover-pager-count-button[aria-expanded=true] svg{rotate:180deg}.clover-pager-list.clover-collection>.clover-items{--clover-items-gap: var(--clover-space-m);margin:0}.clover-pager[data-size=small]{gap:var(--clover-space-2xs);padding-block:0}.clover-pager[data-size=small] .clover-pager-count-button{font-size:var(--clover-text-xs);line-height:1}.clover-pager[data-size=small] .clover-pager-position{font-weight:600}}