diff --git a/package.json b/package.json
index f177e12c..4f9fe89d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@aws-sdk/s3-request-presigner": "3.521.0",
     "@next/bundle-analyzer": "14.1.0",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04363c1e..8a5fb13f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   '@radix-ui/react-dropdown-menu':
     specifier: ^2.0.6
     version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.58)(react-dom@18.2.0)(react@18.2.0)
+  '@tailwindcss/container-queries':
+    specifier: ^0.1.1
+    version: 0.1.1(tailwindcss@3.4.1)
   '@tailwindcss/forms':
     specifier: ^0.5.7
     version: 0.5.7(tailwindcss@3.4.1)
@@ -2867,6 +2870,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.4.1
+    dev: false
+
   /@tailwindcss/forms@0.5.7(tailwindcss@3.4.1):
     resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
     peerDependencies:
diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index 1fd44dee..d7bd0fd6 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/src/components/ImageBlurFallback.tsx
@@ -54,6 +54,7 @@ export default function ImageBlurFallback(props: ImageProps) {
     >
       {showPlaceholder &&
         <div className={clsx(
+          '@container',
           'absolute inset-0',
           'bg-main overflow-hidden',
           'transition-opacity duration-300 ease-in',
@@ -66,13 +67,13 @@ export default function ImageBlurFallback(props: ImageProps) {
               className: clsx(
                 imageClassName,
                 // Fix poorly blurred placeholder data generated by Safari
-                'blur-md scale-105',
+                'blur-sm @xs:blue-md scale-105',
               ),
             }} />
             :  <div className={clsx(
               'w-full h-full',
               'bg-gray-100/50 dark:bg-gray-900/50',
-            )}/>}
+            )} />}
         </div>}
       <Image {...{
         ...rest,
diff --git a/tailwind.config.js b/tailwind.config.js
index 61b59613..9816930c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,5 +42,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/container-queries'),
   ],
 };