Content Banner default and sm breakpoint

app/components/ContentBanner.js

@@ -0,0 +1,25 @@
+"use client";
+
+import { getAssetPath } from "../../lib/assetUtils";
+import ContentContainer from "./ContentContainer";
+
+export default function ContentBanner({ post }) {
+  return (
+    <div className="pt-[var(--measures-spacing-016)] h-[275px] sm:h-[326px] relative w-full sm:overflow-hidden">
+      {/* Background SVG */}
+      <div
+        className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[320/225.5]"
+        style={{
+          backgroundImage: `url(${getAssetPath("assets/Content_Banner.svg")})`,
+          backgroundPosition: "center bottom",
+        }}
+      />
+
+      {/* Content Container */}
+      <div className="relative z-10 h-full flex flex-col justify-center pl-[var(--measures-spacing-016)] pr-[96px]">
+        {/* ContentContainer with post data */}
+        <ContentContainer post={post} size="responsive" />
+      </div>
+    </div>
+  );
+}

app/components/ContentContainer.js

@@ -32,7 +32,12 @@ const ContentContainer = ({ post, width = "200px", size = "responsive" }) => {
       : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
 
   return (
-    <div className={containerClasses} style={{ width }}>
+    <div
+      className={`${containerClasses} ${
+        size === "responsive" ? "max-w-[298px] sm:max-w-[479px]" : ""
+      }`}
+      style={size === "responsive" ? {} : { width }}
+    >
       {/* Content Container - gap between icon and text */}
       <div
         className={