/* /figaro/: the page's own parts - only the phone frames of the screenshots. The rest is site.css, home.css (hero,
   benefits) and pricing/pricing.css (plans, questions). */
.phone { margin: 0; width: 100%; max-width: 300px; justify-self: center; }
.phone img {
  display: block; width: 100%; height: auto; border-radius: 30px;
  background: var(--cap); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.phone figcaption { margin-top: 14px; text-align: center; color: var(--muted); font-size: .92rem; }
@media (min-width: 940px) { .phone-hero { justify-self: end; transform: rotate(1.2deg); } }

.shots { display: grid; gap: 32px; margin-top: 36px; justify-items: center; }
.shots .phone { max-width: 270px; }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(3, 1fr); } }