.wrapper {
  z-index: -1;
}

.picture {
  visibility: visible;
  opacity: 1;
  transition: opacity 400ms ease-in-out 0s;
  transform: translate(-50%, -50%) !important;
}

.heroImage {
  width: 100%;
  height: auto;
  max-height: 600px;
  min-height: 100px;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1/1;
}

@media screen and (min-width: 768px) {
  .heroImage {
    aspect-ratio: auto;
  }
}

@media screen and (min-width: 1367px) {
  .wrapper {
    overflow: hidden;
    position: sticky;
    top: 0px;
  }
}