@vkzstudio/muza-ui 1.6.0 → 1.8.0

package/dist/components/ArticleCard/ArticleCard.js

@@ -1,19 +1,20 @@
-import { jsxs as t, Fragment as T, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, Fragment as D, jsx as e } from "react/jsx-runtime";
 import * as L from "react";
-import { Slot as q } from "@radix-ui/react-slot";
-import { cva as D } from "class-variance-authority";
-import { useMuzaTranslationContext as G } from "../../translations/TranslationContext.js";
+import { Slot as G } from "@radix-ui/react-slot";
+import { cva as V } from "class-variance-authority";
+import { useMuzaTranslationContext as H } from "../../translations/TranslationContext.js";
 import { cn as o } from "../../utils/cn.js";
-import { disabledLinkProps as H } from "../../utils/disabledLinkProps.js";
-import { formatDate as J } from "../../utils/formatDate.js";
-import { Button as K } from "../Button/Button.js";
-import { DotDivider as Q } from "../DotDivider/DotDivider.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { AltArrowRightOutline as U } from "@solar-icons/react-perf";
-import { Skeleton as l } from "../Skeleton/Skeleton.js";
+import { disabledLinkProps as J } from "../../utils/disabledLinkProps.js";
+import { formatDate as K } from "../../utils/formatDate.js";
+import { Button as Q } from "../Button/Button.js";
+import { DotDivider as U } from "../DotDivider/DotDivider.js";
+import { Flex as l } from "../Flex/Flex.js";
+import { AltArrowRightOutline as X } from "@solar-icons/react-perf";
+import { Skeleton as c } from "../Skeleton/Skeleton.js";
 import { Tag as z } from "../Tag/Tag.js";
-import { Typography as f } from "../Typography/Typography.js";
-const X = D(
+import { Typography as b } from "../Typography/Typography.js";
+import { CardImageSlot as T } from "../internal/CardImageSlot.js";
+const Z = V(
   "group relative inline-flex border border-solid transition-colors focus-visible:outline-none data-[disabled=true]:pointer-events-none",
   {
     variants: {
@@ -25,7 +26,7 @@ const X = D(
     },
     defaultVariants: { variant: "compact" }
   }
-), Z = D("", {
+), _ = V("", {
   variants: {
     variant: {
       compact: "text-text-dark-primary-def group-hover:text-text-brand-hover group-focus-visible:text-text-brand-focused group-data-[disabled=true]:text-text-dark-disabled",
@@ -34,7 +35,7 @@ const X = D(
     }
   },
   defaultVariants: { variant: "compact" }
-}), _ = D("", {
+}), ee = V("", {
   variants: {
     variant: {
       compact: "text-text-dark-secondary group-focus-visible:text-text-brand-focused group-data-[disabled=true]:text-text-dark-disabled",
@@ -43,26 +44,26 @@ const X = D(
     }
   },
   defaultVariants: { variant: "compact" }
-}), ee = (r) => r instanceof Date ? r : new Date(r), u = ({ categories: r, maxNumberOfVisibleTags: a, className: i }) => r.length <= a ? /* @__PURE__ */ e(
-  d,
+}), ae = (r) => r instanceof Date ? r : new Date(r), g = ({ categories: r, maxNumberOfVisibleTags: a, className: i }) => r.length <= a ? /* @__PURE__ */ e(
+  l,
   {
     gap: "xs",
     justify: "start",
     align: "start",
     flex: 1,
     className: o("min-w-0", i),
-    children: r.map((c, n) => /* @__PURE__ */ e(
+    children: r.map((d, m) => /* @__PURE__ */ e(
       z,
       {
         variant: "invert",
         className: "min-w-[50px] shrink-1 overflow-hidden",
-        children: c
+        children: d
       },
-      n
+      m
     ))
   }
 ) : /* @__PURE__ */ t(
-  d,
+  l,
   {
     gap: "xs",
     justify: "start",
@@ -71,14 +72,14 @@ const X = D(
     className: o("min-w-0", i),
     wrap: "wrap",
     children: [
-      r.slice(0, a).map((c, n) => /* @__PURE__ */ e(
+      r.slice(0, a).map((d, m) => /* @__PURE__ */ e(
         z,
         {
           variant: "invert",
           className: "min-w-[50px] shrink-1 overflow-hidden",
-          children: c
+          children: d
         },
-        n
+        m
       )),
       /* @__PURE__ */ t(z, { variant: "invert", className: "shrink-0", children: [
         r.length - a,
@@ -87,17 +88,18 @@ const X = D(
     ]
   }
 );
-u.displayName = "ArticleCard.Tags";
-const b = ({
+g.displayName = "ArticleCard.Tags";
+const x = ({
   variant: r,
   dateText: a,
   readingTime: i,
-  readingTimeFormatter: c
+  readingTimeFormatter: d,
+  inverted: m = !1
 }) => {
-  const n = _({ variant: r }), m = r === "heroLarge" ? "invert" : "default";
-  return /* @__PURE__ */ t(d, { align: "center", gap: "sm", wrap: "wrap", children: [
+  const n = ee({ variant: r }), u = m ? "invert" : "default";
+  return /* @__PURE__ */ t(l, { align: "center", gap: "sm", wrap: "wrap", children: [
     /* @__PURE__ */ e(
-      f,
+      b,
       {
         component: "span",
         variant: "body",
@@ -108,10 +110,10 @@ const b = ({
         children: a
       }
     ),
-    i != null && /* @__PURE__ */ t(T, { children: [
-      /* @__PURE__ */ e(Q, { variant: m }),
+    i != null && /* @__PURE__ */ t(D, { children: [
+      /* @__PURE__ */ e(U, { variant: u }),
       /* @__PURE__ */ e(
-        f,
+        b,
         {
           component: "span",
           variant: "body",
@@ -119,37 +121,37 @@ const b = ({
           weight: "regular",
           fixY: !0,
           className: n,
-          children: c(i)
+          children: d(i)
         }
       )
     ] })
   ] });
 };
-b.displayName = "ArticleCard.Metadata";
-const v = ({ variant: r, label: a }) => {
-  const i = r === "heroLarge";
+x.displayName = "ArticleCard.Metadata";
+const w = ({ label: r, inverted: a = !1 }) => {
+  const i = a;
   return /* @__PURE__ */ e(
-    K,
+    Q,
     {
       asChild: !0,
       variant: i ? "linkInvert" : "link",
       size: "xs",
-      icon: /* @__PURE__ */ e(U, {}),
+      icon: /* @__PURE__ */ e(X, {}),
       iconPosition: "end",
       className: o(
         "self-start",
         i ? "group-hover:text-comp-button-link-invert-text-hover group-data-[disabled=true]:text-comp-button-link-invert-text-disabled" : "group-hover:text-comp-button-link-text-hover group-focus-visible:text-comp-button-link-text-focused group-data-[disabled=true]:text-comp-button-link-text-disabled"
       ),
-      children: /* @__PURE__ */ e("span", { children: a })
+      children: /* @__PURE__ */ e("span", { children: r })
     }
   );
 };
-v.displayName = "ArticleCard.Cta";
-const F = ({
+w.displayName = "ArticleCard.Cta";
+const R = ({
   variant: r = "compact",
   color: a = "default",
   className: i,
-  ...c
+  ...d
 }) => r === "compact" ? /* @__PURE__ */ t(
   "div",
   {
@@ -157,26 +159,26 @@ const F = ({
       "inline-flex flex-col overflow-hidden rounded-comp-article-card-compact-radius border border-solid border-comp-article-card-stroke-default bg-comp-article-card-fill-default",
       i
     ),
-    ...c,
+    ...d,
     children: [
       /* @__PURE__ */ t("div", { className: "relative aspect-[288/162] w-full shrink-0 overflow-hidden", children: [
         /* @__PURE__ */ e(
-          l,
+          c,
           {
             color: a,
             className: "absolute inset-0 size-full rounded-none"
           }
         ),
-        /* @__PURE__ */ e("div", { className: "absolute top-comp-article-card-compact-p-img right-comp-article-card-compact-p-img left-comp-article-card-compact-p-img", children: /* @__PURE__ */ t(d, { gap: "xs", justify: "start", align: "start", children: [
+        /* @__PURE__ */ e("div", { className: "absolute top-comp-article-card-compact-p-img right-comp-article-card-compact-p-img left-comp-article-card-compact-p-img", children: /* @__PURE__ */ t(l, { gap: "xs", justify: "start", align: "start", children: [
           /* @__PURE__ */ e(
-            l,
+            c,
             {
               color: a,
               className: "h-comp-tag-h-def w-16 rounded-full"
             }
           ),
           /* @__PURE__ */ e(
-            l,
+            c,
             {
               color: a,
               className: "h-comp-tag-h-def w-20 rounded-full"
@@ -185,19 +187,19 @@ const F = ({
         ] }) })
       ] }),
       /* @__PURE__ */ t(
-        d,
+        l,
         {
           direction: "column",
           flex: 1,
           justify: "between",
           className: "gap-comp-article-card-compact-gap px-comp-article-card-compact-p-hor py-comp-article-card-compact-p-ver",
           children: [
-            /* @__PURE__ */ t(d, { direction: "column", gap: "2xs", children: [
-              /* @__PURE__ */ e(l, { color: a, className: "h-5 w-full" }),
-              /* @__PURE__ */ e(l, { color: a, className: "h-5 w-3/4" }),
-              /* @__PURE__ */ e(l, { color: a, className: "mt-2xs h-4 w-32" })
+            /* @__PURE__ */ t(l, { direction: "column", gap: "2xs", children: [
+              /* @__PURE__ */ e(c, { color: a, className: "h-5 w-full" }),
+              /* @__PURE__ */ e(c, { color: a, className: "h-5 w-3/4" }),
+              /* @__PURE__ */ e(c, { color: a, className: "mt-2xs h-4 w-32" })
             ] }),
-            /* @__PURE__ */ e(l, { color: a, className: "h-4 w-24 self-start" })
+            /* @__PURE__ */ e(c, { color: a, className: "h-4 w-24 self-start" })
           ]
         }
       )
@@ -210,9 +212,9 @@ const F = ({
       "relative h-full w-full overflow-hidden rounded-comp-article-card-hero-large-radius",
       i
     ),
-    ...c,
+    ...d,
     children: /* @__PURE__ */ e(
-      l,
+      c,
       {
         color: a,
         className: "absolute inset-0 size-full rounded-none"
@@ -226,26 +228,26 @@ const F = ({
       "inline-flex flex-row gap-comp-article-card-search-gap",
       i
     ),
-    ...c,
+    ...d,
     children: [
       /* @__PURE__ */ t("div", { className: "relative h-comp-article-card-search-h-img w-comp-article-card-search-w-img shrink-0 overflow-hidden rounded-comp-article-card-search-radius-img", children: [
         /* @__PURE__ */ e(
-          l,
+          c,
           {
             color: a,
             className: "absolute inset-0 size-full rounded-none"
           }
         ),
-        /* @__PURE__ */ e("div", { className: "absolute top-comp-article-card-search-p-img right-comp-article-card-search-p-img left-comp-article-card-search-p-img", children: /* @__PURE__ */ t(d, { gap: "xs", justify: "start", align: "start", children: [
+        /* @__PURE__ */ e("div", { className: "absolute top-comp-article-card-search-p-img right-comp-article-card-search-p-img left-comp-article-card-search-p-img", children: /* @__PURE__ */ t(l, { gap: "xs", justify: "start", align: "start", children: [
           /* @__PURE__ */ e(
-            l,
+            c,
             {
               color: a,
               className: "h-comp-tag-h-def w-16 rounded-full"
             }
           ),
           /* @__PURE__ */ e(
-            l,
+            c,
             {
               color: a,
               className: "h-comp-tag-h-def w-20 rounded-full"
@@ -254,77 +256,55 @@ const F = ({
         ] }) })
       ] }),
       /* @__PURE__ */ t(
-        d,
+        l,
         {
           direction: "column",
           flex: 1,
           justify: "between",
           className: "min-w-0 gap-comp-article-card-search-gap-text pt-comp-article-card-search-p-top-text",
           children: [
-            /* @__PURE__ */ t(d, { direction: "column", gap: "xs", children: [
-              /* @__PURE__ */ e(l, { color: a, className: "h-5 w-full" }),
-              /* @__PURE__ */ e(l, { color: a, className: "h-5 w-2/3" }),
-              /* @__PURE__ */ e(l, { color: a, className: "mt-xs h-4 w-32" })
+            /* @__PURE__ */ t(l, { direction: "column", gap: "xs", children: [
+              /* @__PURE__ */ e(c, { color: a, className: "h-5 w-full" }),
+              /* @__PURE__ */ e(c, { color: a, className: "h-5 w-2/3" }),
+              /* @__PURE__ */ e(c, { color: a, className: "mt-xs h-4 w-32" })
             ] }),
-            /* @__PURE__ */ e(l, { color: a, className: "h-4 w-24 self-start" })
+            /* @__PURE__ */ e(c, { color: a, className: "h-4 w-24 self-start" })
           ]
         }
       )
     ]
   }
 );
-F.displayName = "ArticleCard.Skeleton";
-const x = ({
-  image: r,
-  alt: a,
-  wrapperClassName: i,
-  children: c
-}) => /* @__PURE__ */ t("div", { className: i, children: [
-  /* @__PURE__ */ e(
-    "div",
-    {
-      className: o(
-        "absolute inset-0 overflow-hidden",
-        "[&>img]:size-full [&>img]:object-cover",
-        "transition-transform duration-300 ease-out group-hover:scale-110",
-        "group-data-[disabled=true]:opacity-50",
-        "group-data-[disabled=true]:grayscale",
-        "group-data-[disabled=true]:group-hover:scale-100"
-      ),
-      children: typeof r == "string" ? /* @__PURE__ */ e("img", { src: r, alt: a }) : r
-    }
-  ),
-  c
-] });
-x.displayName = "ArticleCard.ImageSlot";
-const R = L.forwardRef(
+R.displayName = "ArticleCard.Skeleton";
+const E = L.forwardRef(
   (r, a) => {
     const {
       name: i,
-      image: c,
-      imageAlt: n,
-      categories: m = [],
-      maxNumberOfVisibleTags: w = 2,
-      publicationDate: E,
+      image: d,
+      imageAlt: m,
+      categories: n = [],
+      maxNumberOfVisibleTags: u = 2,
+      publicationDate: P,
       readingTime: N,
-      formatDate: P,
-      readArticleLabel: Y,
-      readingTimeLabel: B,
+      formatDate: Y,
+      readArticleLabel: B,
+      readingTimeLabel: O,
       variant: s = "compact",
       disabled: p = !1,
-      asChild: O = !1,
-      href: W,
-      className: $,
+      asChild: W = !1,
+      href: $,
+      className: q,
       children: S,
-      ...V
-    } = r, { translations: I } = G(), k = Y ?? I.articleCard.readArticle, y = B ?? I.articleCard.readingTime, C = (P ?? J)(ee(E)), g = m.length > 0, A = Z({ variant: s }), j = n ?? (s === "heroLarge" ? "" : i);
-    let h = null;
-    s === "compact" ? h = /* @__PURE__ */ t(T, { children: [
+      ...I
+    } = r, { translations: M } = H(), k = B ?? M.articleCard.readArticle, C = O ?? M.articleCard.readingTime, y = (Y ?? K)(ae(P)), v = n.length > 0, h = s === "heroLarge", A = _({ variant: s }), j = m ?? (s === "heroLarge" ? "" : i);
+    let f = null;
+    s === "compact" ? f = /* @__PURE__ */ t(D, { children: [
       /* @__PURE__ */ t(
-        x,
+        T,
         {
-          image: c,
+          image: d,
           alt: j,
+          componentName: "ArticleCard",
           wrapperClassName: "relative aspect-[288/162] w-full shrink-0 overflow-hidden",
           children: [
             /* @__PURE__ */ e(
@@ -334,27 +314,27 @@ const R = L.forwardRef(
                 className: "absolute inset-0 bg-gradient-to-t from-black/0 from-50% to-black/70"
               }
             ),
-            g && /* @__PURE__ */ e("div", { className: "absolute top-comp-article-card-compact-p-img right-comp-article-card-compact-p-img left-comp-article-card-compact-p-img", children: /* @__PURE__ */ e(
-              u,
+            v && /* @__PURE__ */ e("div", { className: "absolute top-comp-article-card-compact-p-img right-comp-article-card-compact-p-img left-comp-article-card-compact-p-img", children: /* @__PURE__ */ e(
+              g,
               {
-                categories: m,
-                maxNumberOfVisibleTags: w
+                categories: n,
+                maxNumberOfVisibleTags: u
               }
             ) })
           ]
         }
       ),
       /* @__PURE__ */ t(
-        d,
+        l,
         {
           direction: "column",
           flex: 1,
           justify: "between",
           className: "gap-comp-article-card-compact-gap px-comp-article-card-compact-p-hor py-comp-article-card-compact-p-ver",
           children: [
-            /* @__PURE__ */ t(d, { direction: "column", gap: "2xs", children: [
+            /* @__PURE__ */ t(l, { direction: "column", gap: "2xs", children: [
               /* @__PURE__ */ e(
-                f,
+                b,
                 {
                   component: "h3",
                   variant: "title",
@@ -365,47 +345,55 @@ const R = L.forwardRef(
                 }
               ),
               /* @__PURE__ */ e(
-                b,
+                x,
                 {
                   variant: s,
-                  dateText: C,
+                  inverted: h,
+                  dateText: y,
                   readingTime: N,
-                  readingTimeFormatter: y
+                  readingTimeFormatter: C
                 }
               )
             ] }),
-            /* @__PURE__ */ e(v, { variant: s, label: k })
+            /* @__PURE__ */ e(w, { label: k, inverted: h })
           ]
         }
       )
-    ] }) : s === "heroLarge" ? h = /* @__PURE__ */ t(
-      x,
+    ] }) : s === "heroLarge" ? f = /* @__PURE__ */ t(
+      T,
       {
-        image: c,
+        image: d,
         alt: j,
+        componentName: "ArticleCard",
         wrapperClassName: o(
           "absolute inset-0 flex flex-col gap-lg overflow-hidden rounded-comp-article-card-hero-large-radius px-comp-article-card-hero-large-p pt-comp-article-card-hero-large-p pb-comp-article-card-hero-large-p-bottom",
-          g ? "justify-between" : "justify-end"
+          v ? "justify-between" : "justify-end"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-tr from-black/50 from-22% to-black/0 to-90%" }),
-          g && /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e(
-            u,
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 bg-gradient-to-tr from-black/50 from-22% to-black/0 to-90%"
+            }
+          ),
+          v && /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e(
+            g,
             {
-              categories: m,
-              maxNumberOfVisibleTags: w
+              categories: n,
+              maxNumberOfVisibleTags: u
             }
           ) }),
           /* @__PURE__ */ t(
-            d,
+            l,
             {
               direction: "column",
               gap: "lg",
               className: "relative max-w-comp-article-card-hero-large-text-max-w",
               children: [
-                /* @__PURE__ */ t(d, { direction: "column", gap: "sm", children: [
+                /* @__PURE__ */ t(l, { direction: "column", gap: "sm", children: [
                   /* @__PURE__ */ e(
-                    f,
+                    b,
                     {
                       component: "h3",
                       variant: "title",
@@ -416,27 +404,29 @@ const R = L.forwardRef(
                     }
                   ),
                   /* @__PURE__ */ e(
-                    b,
+                    x,
                     {
                       variant: s,
-                      dateText: C,
+                      inverted: h,
+                      dateText: y,
                       readingTime: N,
-                      readingTimeFormatter: y
+                      readingTimeFormatter: C
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e(v, { variant: s, label: k })
+                /* @__PURE__ */ e(w, { label: k, inverted: h })
               ]
             }
           )
         ]
       }
-    ) : h = /* @__PURE__ */ t(T, { children: [
+    ) : f = /* @__PURE__ */ t(D, { children: [
       /* @__PURE__ */ t(
-        x,
+        T,
         {
-          image: c,
+          image: d,
           alt: j,
+          componentName: "ArticleCard",
           wrapperClassName: "relative shrink-0 overflow-hidden rounded-comp-article-card-search-radius-img h-comp-article-card-search-h-img w-comp-article-card-search-w-img",
           children: [
             /* @__PURE__ */ e(
@@ -446,20 +436,20 @@ const R = L.forwardRef(
                 className: "absolute inset-0 bg-gradient-to-b from-black/50 to-black/0 to-50%"
               }
             ),
-            g && /* @__PURE__ */ t("div", { className: "absolute top-comp-article-card-search-p-img right-comp-article-card-search-p-img left-comp-article-card-search-p-img", children: [
+            v && /* @__PURE__ */ t("div", { className: "absolute top-comp-article-card-search-p-img right-comp-article-card-search-p-img left-comp-article-card-search-p-img", children: [
               /* @__PURE__ */ e(
-                u,
+                g,
                 {
-                  categories: m,
+                  categories: n,
                   maxNumberOfVisibleTags: 1,
                   className: "md:hidden"
                 }
               ),
               /* @__PURE__ */ e(
-                u,
+                g,
                 {
-                  categories: m,
-                  maxNumberOfVisibleTags: w,
+                  categories: n,
+                  maxNumberOfVisibleTags: u,
                   className: "hidden md:flex"
                 }
               )
@@ -468,16 +458,16 @@ const R = L.forwardRef(
         }
       ),
       /* @__PURE__ */ t(
-        d,
+        l,
         {
           direction: "column",
           flex: 1,
           justify: "between",
           className: "min-w-0 gap-comp-article-card-search-gap-text pt-comp-article-card-search-p-top-text",
           children: [
-            /* @__PURE__ */ t(d, { direction: "column", gap: "xs", children: [
+            /* @__PURE__ */ t(l, { direction: "column", gap: "xs", children: [
               /* @__PURE__ */ e(
-                f,
+                b,
                 {
                   component: "h3",
                   variant: "title",
@@ -488,55 +478,56 @@ const R = L.forwardRef(
                 }
               ),
               /* @__PURE__ */ e(
-                b,
+                x,
                 {
                   variant: s,
-                  dateText: C,
+                  inverted: h,
+                  dateText: y,
                   readingTime: N,
-                  readingTimeFormatter: y
+                  readingTimeFormatter: C
                 }
               )
             ] }),
-            /* @__PURE__ */ e(v, { variant: s, label: k })
+            /* @__PURE__ */ e(w, { label: k, inverted: h })
           ]
         }
       )
     ] });
-    const M = o(X({ variant: s }), $);
-    return O && L.isValidElement(S) ? /* @__PURE__ */ e(
-      q,
+    const F = o(Z({ variant: s }), q);
+    return W && L.isValidElement(S) ? /* @__PURE__ */ e(
+      G,
       {
         ref: a,
-        className: M,
+        className: F,
         "data-disabled": p || void 0,
         "aria-disabled": p || void 0,
-        ...V,
+        ...I,
         children: L.cloneElement(
           S,
-          p ? H : void 0,
-          h
+          p ? J : void 0,
+          f
         )
       }
     ) : /* @__PURE__ */ e(
       "a",
       {
         ref: a,
-        href: p ? void 0 : W,
-        className: M,
+        href: p ? void 0 : $,
+        className: F,
         "data-disabled": p || void 0,
         "aria-disabled": p || void 0,
-        ...V,
-        children: h
+        ...I,
+        children: f
       }
     );
   }
 );
-R.displayName = "ArticleCard";
-const ae = R;
-ae.Skeleton = F;
+E.displayName = "ArticleCard";
+const te = E;
+te.Skeleton = R;
 export {
-  ae as ArticleCard,
-  _ as articleCardMetaVariants,
-  Z as articleCardTitleVariants,
-  X as articleCardVariants
+  te as ArticleCard,
+  ee as articleCardMetaVariants,
+  _ as articleCardTitleVariants,
+  Z as articleCardVariants
 };

package/dist/components/CarouselSection/CarouselSection.examples.d.ts

@@ -25,7 +25,7 @@ export interface CarouselSectionProps {
  */
 export declare const CarouselSection: ({ title, items, ctaLabel, ctaHref, }: CarouselSectionProps) => import("react/jsx-runtime").JSX.Element;
 /**
- * Pre-rendered slides using the library `OfferCard` (compact promo variant).
+ * Pre-rendered slides using the library `OfferCard` (tinted compact variant).
  * Below desktop the fixed `w-[284px]` drives the peeking multi-card layout;
  * `lg:w-full` lets the card fill its slide so the desktop fractional bases
  * (3 → 4 → 5 per view) line up exactly. `h-full` matches the tallest card.