.hero__media-wrapper {
  position: relative;
  background-color:white;
  margin:auto;
  img {
    position: absolute;
    top: 0;
    width: 50%;
    height: 93%;
    z-index: 1;
    top:7%;
    mask-size: 100% 100%;
    object-fit: cover;
    mask-image: url(/cdn/shop/files/hero-max-clipping-mask.svg?v=1762340962);
    mask-repeat: round;
    mask-size: 100% 100%;
    filter:
      brightness(50%);
    z-index: 1;
  }
  img ~ img {
    left:12px;
    top:0;
    z-index: 1.5;
    height: 93%;
    object-fit:cover;
    filter: none;
  }
  @media (max-width: 650px) {
    img {
      filter: contrast(20%) saturate(50%) !important;
      min-width: 325px;
      left: auto;
    }
  }
}