Merge branch 'fix/home-hero-layers'

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -391,7 +391,7 @@ const projects: Project[] = [
 .hero {
   position: relative;
   overflow: hidden;
-  min-height: 80vh;
+  min-height: 110vh;
   display: flex;
   align-items: center;
 }
@@ -416,18 +416,22 @@ const projects: Project[] = [
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center 44%;
+  z-index: 0;
 }
 
 .hero__mountain {
-  bottom: -2rem;
-  width: 120%;
+  bottom: calc(50% - 58.8vw);
+  width: 100vw;
   max-width: none;
+  z-index: 1;
 }
 
 .hero__hiker {
-  bottom: 10%;
-  width: 35%;
-  max-width: 480px;
+  bottom: min(-30vw, -13rem);
+  width: 100vw;
+  max-width: none;
+  z-index: 2;
 }
 
 .hero__content {
@@ -436,11 +440,12 @@ const projects: Project[] = [
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  gap: 3rem;
+  gap: 0.5rem;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 6rem 2rem;
+  transform: translateY(clamp(-15.25rem, calc(-22vh - 20px), -8.25rem));
 }
 
 .hero__text {
@@ -468,7 +473,7 @@ const projects: Project[] = [
 }
 
 .hero__portrait-frame {
-  --portrait-frame-size: clamp(180px, 22vw, 320px);
+  --portrait-frame-size: clamp(200px, 24vw, 350px);
 
   width: var(--portrait-frame-size);
   height: var(--portrait-frame-size);
@@ -1055,10 +1060,6 @@ const projects: Project[] = [
     margin: 0 auto;
   }
 
-  .hero__hiker {
-    width: 60%;
-  }
-
   .core-teachings__grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem 1rem;