Fix featured grid

app/components/cards/Mini/Mini.container.tsx

@@ -21,6 +21,10 @@ const MiniContainer = memo<MiniProps>(
     onClick,
     href,
     ariaLabel,
+    featureGridShell = false,
+    panelWidth,
+    panelHeight,
+    panelImageClassName,
   }) => {
     const t = useTranslation("controlsChrome");
 
@@ -92,6 +96,10 @@ const MiniContainer = memo<MiniProps>(
         computedAriaLabel={computedAriaLabel}
         wrapperElement={wrapperElement}
         wrapperProps={wrapperProps}
+        featureGridShell={featureGridShell}
+        panelWidth={panelWidth}
+        panelHeight={panelHeight}
+        panelImageClassName={panelImageClassName}
       >
         {children}
       </MiniView>

app/components/cards/Mini/Mini.types.ts

@@ -9,6 +9,11 @@ export interface MiniProps {
   onClick?: () => void;
   href?: string;
   ariaLabel?: string;
+  /** Figma Feature-Grid mini tile shell (18847:22410). */
+  featureGridShell?: boolean;
+  panelWidth?: number;
+  panelHeight?: number;
+  panelImageClassName?: string;
 }
 
 export interface MiniViewProps {
@@ -25,4 +30,8 @@ export interface MiniViewProps {
     | React.AnchorHTMLAttributes<HTMLAnchorElement>
     | React.ButtonHTMLAttributes<HTMLButtonElement>
     | React.HTMLAttributes<HTMLDivElement>;
+  featureGridShell?: boolean;
+  panelWidth?: number;
+  panelHeight?: number;
+  panelImageClassName?: string;
 }

app/components/cards/Mini/Mini.view.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import Image from "next/image";
+import { SVG_GRAIN_MULTIPLY_FILTER } from "../../../../lib/svgGrainFilter";
 import type { MiniViewProps } from "./Mini.types";
 
 function MiniView({
@@ -15,39 +16,59 @@ function MiniView({
   computedAriaLabel,
   wrapperElement,
   wrapperProps,
+  featureGridShell = false,
+  panelWidth,
+  panelHeight,
+  panelImageClassName,
 }: MiniViewProps) {
+  const defaultPanelSize = featureGridShell ? 48 : 58;
+  const imageWidth = panelWidth ?? defaultPanelSize;
+  const imageHeight = panelHeight ?? defaultPanelSize;
+
+  const outerClass = featureGridShell
+    ? `flex min-h-[159px] flex-col gap-[7px] ${className}`
+    : `h-[186px] flex flex-col gap-[7px] ${className}`;
+
+  const panelClass = featureGridShell
+    ? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
+    : `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`;
+
+  const imageClass = featureGridShell
+    ? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`
+    : "max-w-[58px] max-h-[58px] w-auto h-auto object-contain";
+
   const cardContentElement = (
-    <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
-      {/* Top part - Inner panel */}
-      <div
-        className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
-      >
-        {/* Content for the inner panel */}
+    <div className={outerClass}>
+      <div className={panelClass}>
         {panelContent && (
-          <div className="flex items-center justify-center w-full h-full">
+          <div className="flex h-full w-full items-center justify-center">
             <Image
               src={panelContent}
               alt={computedAriaLabel}
-              className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
-              width={58}
-              height={58}
+              className={imageClass}
+              width={imageWidth}
+              height={imageHeight}
               sizes="(max-width: 768px) 50vw, 25vw"
               loading="lazy"
-              placeholder="blur"
-              blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
+              style={
+                featureGridShell
+                  ? {
+                      filter: SVG_GRAIN_MULTIPLY_FILTER,
+                      WebkitFilter: SVG_GRAIN_MULTIPLY_FILTER,
+                    }
+                  : undefined
+              }
             />
           </div>
         )}
         {children}
       </div>
 
-      {/* Bottom part - Text container */}
-      <div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
+      <div className="text-center font-inter text-[12px] font-medium leading-[14px] text-[var(--color-content-default-primary)]">
         {labelLine1 && labelLine2 ? (
           <>
             <div>{labelLine1}</div>
             <div>{labelLine2}</div>
-            <div>&nbsp;</div>
           </>
         ) : (
           label