.zoom {
  padding: 100px 0;
  background: none;
  display: flex;
  justify-content: center;
  height: 60vw;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  z-index: 10;
}

/* Add styles for .inner to make it a flex container that aligns content to the top */
.zoom .inner {
  display: flex; /* Enable flexbox for the inner container */
  justify-content: center; /* Center horizontally */
  align-items: flex-start; /* Align to the top vertically */
  width: 100%; /* Ensure it takes full width of its parent */
  height: 100%; /* Ensure it takes full height of its parent */
}

.zoom img {
  width: 60%;
  -o-object-fit: fill;
     object-fit: fill;
  position: sticky; /* Keep the image sticky at the top within its scroll container */
  will-change: transform;
  transform: scale(1.25); /* Initial scale before any scrolling happens */
  transition: transform 0.1s linear;
  z-index: 11;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: portrait) {

.zoom {
    height: 80vw;
}

.zoom img {
    width: 80%;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: landscape) {

}