/* Make the real application evidence the focus. */
.hero {
  grid-template-columns: minmax(380px, .72fr) minmax(0, 1.28fr);
  gap: 4vw;
}

.hero-shot,
.screen-row figure {
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 18px 48px rgba(20, 32, 51, .11);
}

.hero-shot img,
.screen-row figure img {
  width: 100%;
  height: auto;
}

.screen-row figure.login-shot {
  background: #f6f3f0;
}

.screen-row figure.login-shot img {
  width: min(100%, 430px);
  margin: 0 auto;
}

.screens {
  gap: 72px;
}

.section-head {
  margin-bottom: 4px;
}

.screen-row {
  grid-template-columns: minmax(230px, .5fr) minmax(0, 1.5fr);
  gap: 4vw;
}

.screen-row.reverse {
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, .5fr);
}

@media (max-width: 850px) {
  .hero,
  .screen-row,
  .screen-row.reverse {
    grid-template-columns: 1fr;
  }
}