@layer components {
  /* The photo and the fields beside it. Compounded with .row rather than left
     to sit after it in the file: it is a .row that differs, and a modifier
     that only wins because of where it happens to be written is a modifier
     that stops working the day the file is split. */
  .row.profile__photo {
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: nowrap;
  }

  /* The column beside the face takes the rest of the width. Without this the
     file field shrinks to its content and the browser's own "No file chosen"
     decides how wide the control is. */
  .profile__photo-controls { flex: 1; min-width: 0; }

  /* Clear of the note above it, and it is the one thing in this column that is
     a control rather than a description of one. */
  .profile__remove { margin-top: var(--space); }

  /* On a phone the face goes above the fields rather than beside them: 96px of
     avatar and a file input do not share 340px. A column rather than
     flex-wrap, because wrapping is what a flex row does only once it *cannot*
     shrink — and a file field shrinks happily, right up to hiding the name of
     the file you just chose. */
  @media (max-width: 40rem) {
    .row.profile__photo {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
    }

    .profile__photo-controls { width: 100%; }
  }
}