src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -102,11 +102,24 @@ const HeroBillboardCarousel = ({
         <section
             aria-label={ariaLabel}
             className={cls(
-                "relative w-full py-hero-page-padding md:h-svh md:py-0",
+                "relative w-full py-hero-page-padding md:h-svh md:py-0 overflow-hidden",
                 className
             )}
         >
             <HeroBackgrounds {...background} />
+            {backgroundImageSrc && (
+                <div
+                    className="absolute inset-0 z-0"
+                    style={{
+                        backgroundImage: `url('${backgroundImageSrc}')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        opacity: backgroundImageOpacity,
+                        filter: 'blur(40px)',
+                    }}
+                    aria-hidden="true"
+                />
+            )}
             <div className={cls(
                 "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
                 "w-full md:w-content-width md:h-full md:items-center md:justify-center",
@@ -133,7 +146,7 @@ const HeroBillboardCarousel = ({
                     center={true}
                 />
 
-                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
+                <div className={cls("w-full -mx-[var(--content-padding)] relative z-20", mediaWrapperClassName)}>
                     <AutoCarousel
                         title=""
                         description=""