.scaled-with-opacity-block {
  height: 100vh;
  height: 100dvh; 
  width: 100%;
  background-color: var(--neutral-w);
  overflow: hidden;
}

.scaled-wo-background {
  position: absolute;
  left: 50%;
  bottom: -20vh;
  /* transform-origin: bottom center; */
  width: 30vw;
  height: 30vh;
  transform: translate(-50%, 0);
}

.scaled-wo-background img {
  object-fit: cover;
}

.scaled-wo-title {
  --top-mult: 0.4;
  position: absolute;
  left: 50%;
  min-width: 900px;
  transform: translate(-50%, -50%);
  top: calc(
    (var(--menu-height, 0px) + var(--sticky-h-height, 0px)) + 
    (100vh - (var(--menu-height, 0px) + var(--sticky-h-height, 0px))) * var(--top-mult)
  );
}

/* .scaled-wo-title * {
  text-align: center;
} */

.scaled-wo-curtain {
  background-color: var(--neutral-w);
  opacity: 0;
}

.scaled-with-opacity-g-curt {
  background-color: var(--neutral-w);
  pointer-events: none;
}

@media screen and (max-width: 1200px) {
  .scaled-wo-title {
    min-width: unset;
  }
}

@media screen and (max-width: 768px) {
  .scaled-with-opacity-block {
    height: 100vh; /* fallback */
    /* height: 100vh; */
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Prevent browser from trying to be helpful with scroll-chaining */
    touch-action: pan-y; 
  }
  .scaled-wo-background {
    width: 60vw;
    height: 40vh;
    /* bottom: -100px; */
  }

  .scaled-wo-title { 
    --top-mult: 0.45;   
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;    
  }
}