Align props with figma

app/components/ContentContainer/ContentContainer.container.tsx

@@ -4,9 +4,12 @@ import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 import ContentContainerView from "./ContentContainer.view";
 import type { ContentContainerProps } from "./ContentContainer.types";
+import { normalizeContentContainerSize } from "../../../lib/propNormalization";
 
 const ContentContainerContainer = memo<ContentContainerProps>(
-  ({ post, width = "200px", size = "responsive" }) => {
+  ({ post, width = "200px", size: sizeProp = "responsive" }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeContentContainerSize(sizeProp);
     // Get the corresponding icon based on the same logic as background images
     const getIconImage = (slug: string): string => {
       const icons = [

app/components/ContentContainer/ContentContainer.types.ts

@@ -1,9 +1,15 @@
 import type { BlogPost } from "../../../lib/content";
 
+export type ContentContainerSizeValue = "xs" | "responsive" | "Xs" | "Responsive";
+
 export interface ContentContainerProps {
   post: BlogPost;
   width?: string;
-  size?: "xs" | "responsive";
+  /**
+   * Content container size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: ContentContainerSizeValue;
 }
 
 export interface ContentContainerViewProps {