Content Banner md lg xl breakpoints

app/components/ContentBanner.js

@@ -5,8 +5,8 @@ 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="pt-[var(--measures-spacing-016)] md:pt-[var(--measures-spacing-008)] lg:pt-[50px] xl:pt-[112px] h-[275px] sm:h-[326px] md:h-[224px] lg:h-[358.4px] xl:h-[504px] relative w-full sm:overflow-hidden">
+      {/* Background SVG - Default to sm breakpoint */}
       <div
         className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[320/225.5]"
         style={{
@@ -15,8 +15,35 @@ export default function ContentBanner({ post }) {
         }}
       />
 
+      {/* Background SVG - md breakpoint and above */}
+      <div
+        className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[640/224] md:block hidden"
+        style={{
+          backgroundImage: `url(${getAssetPath(
+            "assets/Content_Banner_2.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]">
+      <div
+        className="
+          relative z-10 h-full
+          flex flex-col
+          pl-[var(--measures-spacing-016)] md:pl-[var(--measures-spacing-024)] lg:pl-[var(--measures-spacing-064)]
+          pr-[96px] md:pr-[350px]
+
+          /* default: normal flow, top-aligned */
+          justify-start
+
+          /* only at md: take out of flow and center vertically */
+          md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:w-full md:h-auto
+
+          /* after md (lg+): snap back to normal flow/top align */
+          lg:static lg:translate-y-0 lg:top-auto lg:h-full lg:justify-start
+        "
+      >
         {/* ContentContainer with post data */}
         <ContentContainer post={post} size="responsive" />
       </div>

app/components/ContentContainer.js

@@ -34,7 +34,9 @@ const ContentContainer = ({ post, width = "200px", size = "responsive" }) => {
   return (
     <div
       className={`${containerClasses} ${
-        size === "responsive" ? "max-w-[298px] sm:max-w-[479px]" : ""
+        size === "responsive"
+          ? "max-w-[298px] sm:max-w-[479px] lg:max-w-[365px] xl:max-w-[623px]"
+          : ""
       }`}
       style={size === "responsive" ? {} : { width }}
     >

public/assets/Content_Banner_2.svg

@@ -0,0 +1,9 @@
+<svg width="1440" height="496" viewBox="0 0 1440 496" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="-7.59998" width="1440" height="504" fill="url(#pattern0_19189_9296)"/>
+<defs>
+<pattern id="pattern0_19189_9296" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_19189_9296" transform="scale(0.000260417 0.000744048)"/>
+</pattern>
+<image id="image0_19189_9296" width="3840" height="1344" preserveAspectRatio="none" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>