diff --git a/package.json b/package.json
index 5375de1..cd44df8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.21.1",
+	"version": "1.21.2",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/recipes/TitleImgParallax.svelte b/src/lib/components/recipes/TitleImgParallax.svelte
index 5fbcc3a..a3406be 100644
--- a/src/lib/components/recipes/TitleImgParallax.svelte
+++ b/src/lib/components/recipes/TitleImgParallax.svelte
@@ -46,7 +46,7 @@
 
 .section {
   margin-bottom: -20vh;
-  margin-top: calc(-3.5rem - 12px);
+  margin-top: calc(-3.5rem - 12px - env(safe-area-inset-top, 0px));
   transform-origin: center top;
   transform: scaleY(calc(1 - var(--scale)));
 }
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 83b47dd..e1c7700 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -137,7 +137,7 @@
 	margin-bottom: calc(var(--parallax-scale) * (20vh - min(60vh, 520px)));
 	transform-origin: center top;
 	transform: scaleY(calc(1 - var(--parallax-scale)));
-	margin-top: calc(-3.5rem - 12px);
+	margin-top: calc(-3.5rem - 12px - env(safe-area-inset-top, 0px));
 }
 @media (prefers-reduced-motion) {
 	.hero-section {