Align props with figma

app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx

@@ -4,9 +4,12 @@ import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
 import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
+import { normalizeContentThumbnailVariant } from "../../../lib/propNormalization";
 
 const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
-  ({ post, className = "", variant = "vertical" }) => {
+  ({ post, className = "", variant: variantProp = "vertical" }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const variant = normalizeContentThumbnailVariant(variantProp);
     // Get article-specific background image from frontmatter
     const getBackgroundImage = (
       post: ContentThumbnailTemplateProps["post"],

app/components/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts

@@ -1,9 +1,15 @@
 import type { BlogPost } from "../../../lib/content";
 
+export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal" | "Vertical" | "Horizontal";
+
 export interface ContentThumbnailTemplateProps {
   post: BlogPost;
   className?: string;
-  variant?: "vertical" | "horizontal";
+  /**
+   * Content thumbnail variant. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  variant?: ContentThumbnailTemplateVariantValue;
   slugOrder?: string[];
 }