.hero-visual {
  min-height: 460px;
}

.real-app-preview {
  width: min(720px, 100%);
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow:
    0 42px 90px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .09),
    0 0 60px rgba(220, 53, 173, .1);
  transform: rotateY(-3deg) rotateX(1deg);
}

.real-app-preview img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.real-app-preview figcaption {
  position: absolute;
  left: 14px;
  bottom: -30px;
  color: #657180;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .hero-visual {
    min-height: 330px;
  }

  .real-app-preview {
    transform: none;
  }
}