/* Modeling. Tokens only. */
.comp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.comp__photo { max-width: 26rem; }
.comp__photo .frame { --ratio: 2 / 3; }
.comp h2 { font-size: var(--step-3); }
.comp__note { margin: var(--space-2) 0 var(--space-6); color: var(--ink-3); }
.comp__card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 0 var(--space-6);
  max-width: 40rem;
  margin: 0 0 var(--space-6);
}
.comp__card div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--hairline) solid var(--line);
}
.comp__card dt { color: var(--ink-3); font-size: var(--step-n1); }
.comp__card dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: var(--step-n1); }
.comp__ask { max-width: var(--measure); color: var(--ink-2); }
@media (min-width: 60rem) {
  .comp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: center; }
}

/* Eight photos: two rows of four on wide screens, pairs on a phone. */
.modeling-photos .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .modeling-photos .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }