.hero-main {
  width: 100%;
  min-height: 400px;
  padding-bottom: 200px;
}

.hero-picture-stack {
  position: relative;
  width: 50%;
  min-height: 320px;
  flex-shrink: 0;
}

.hero-right {
  width: 50%;
  padding-left: 20px;
}

.hero-picture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  max-width: 280px;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.hero-picture--tilt-20 {
  transform: translate(-50%, -50%) rotate(20deg);
}

.hero-picture--tilt-40 {
  transform: translate(-50%, -50%) rotate(40deg);
}

@media (max-width: 750px) {
  .herp-main {
    width: 100%;
    min-height: 260px;
  }

}