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">
+    <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 */}
+      {/* 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 }}
     >