.lp-page .mock-photo, .lp-page .wide-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,75,127,.14), rgba(245,104,100,.08)), linear-gradient(160deg, #f8fbff, #a6bddb 48%, #5f83ad);
  background-repeat: no-repeat;
  image-rendering: auto;
}
.lp-page .mock-photo { height: 186px; }
.lp-page .mock-photo::before, .lp-page .mock-photo::after, .lp-page .wide-photo::before, .lp-page .wide-photo::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 34px rgba(22,75,127,.16);
}
.lp-page .mock-photo::before { left: 12%; top: 25%; width: 38%; height: 42%; border-radius: 14px; }
.lp-page .mock-photo::after { right: 12%; top: 18%; width: 28%; height: 58%; border-radius: 16px; }
.lp-page .mock-photo[class*="--"], .lp-page .wide-photo[class*="--"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lp-page .problem .mock-photo {
  width: 280px;
  height: 187px;
  background-size: contain;
  background-repeat: no-repeat;
}
.lp-page .mock-photo[class*="--"]::before, .lp-page .mock-photo[class*="--"]::after, .lp-page .wide-photo[class*="--"]::before, .lp-page .wide-photo[class*="--"]::after { display: none; }
.lp-page .mock-photo--1 { background-image: var(--img-problem-1); }
.lp-page .mock-photo--2 { background-image: var(--img-problem-2); }
.lp-page .mock-photo--3 { background-image: var(--img-problem-3); }
.lp-page .mock-photo--4 { background-image: var(--img-solution-1); }
.lp-page .mock-photo--5 { background-image: var(--img-solution-2); }
.lp-page .mock-photo--6 { background-image: var(--img-solution-3); }
.lp-page .mock-photo--7 { background-image: var(--img-voice-1); }
.lp-page .mock-photo--8 { background-image: var(--img-voice-2); }
.lp-page .mock-photo--9 { background-image: var(--img-voice-3); }