/* Best profiles pages (build/bestProfilePages.ts), on top of
   profile-examples.css. Each type's header: its trait, its number, name and
   emoji, then one paragraph, what she sees in him in bold cyan and the photos that
   make it, set close to the profile's screenshots under it. */
.example.hinge-example .archetype-head { max-width: 720px; margin-bottom: -12px; }
/* Emoji ignore the heading's tight letter spacing. */
.archetype-emoji { letter-spacing: 0; }
.archetype-intro { margin-top: 10px; color: var(--muted); font-size: 17px; line-height: 1.55; text-wrap: balance; }
.archetype-intro strong { color: var(--cyan); font-weight: 700; }

/* Tinder and Bumble: the app's photo grid on the left, and beside it the
   type, the paragraph on the profile and the button to its review. Square
   cornered, like the Hinge screenshots. */
.example.grid-example { --shot-width: 420px; grid-template-rows: auto auto 1fr; grid-template-areas: "shot head" "shot note" "shot review"; row-gap: 22px; }
.grid-shot { grid-area: shot; align-self: start; margin: 0; overflow: hidden; box-shadow: 0 0 0 1px #ffffff26, 0 30px 60px #0007; }
.grid-shot img { display: block; width: 100%; height: auto; }
.grid-note { grid-area: note; color: var(--muted); font-size: 16px; line-height: 1.7; text-wrap: balance; }
.example.grid-example .review-link { align-self: start; }

@media (max-width: 900px) {
  /* The type, then the grid, the paragraph and the button, in a column no
     wider than a phone's screenshot needs. */
  .example.grid-example { grid-template-rows: none; grid-template-areas: "head" "shot" "note" "review"; max-width: 520px; }
}

@media (max-width: 760px) {
  .archetype-intro { font-size: 16px; }
}