.hero-product {
  display: block;
  width: min(620px, 100%);
  max-height: 290px;
  object-fit: contain;
  object-position: left bottom;
  margin: 24px 0 -22px;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.38));
}

.hero-product--photo {
  width: min(620px, 100%);
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  object-fit: cover;
  object-position: center;
  margin-bottom: -8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.35);
  filter: none;
}

.split img {
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (max-width: 580px) {
  .hero-product {
    max-height: 220px;
    margin-bottom: -8px;
  }
}