@layer components {
  .profile-layout {
    display: flex;
    gap: var(--inline-space);

    @media (min-width: 800px) {
      align-items: stretch;
      justify-content: center;

      /* Panels of very different lengths (the profile page) keep their own height. */
      &.profile-layout--top { align-items: flex-start; }
    }

    @media (max-width: 799px) {
      align-items: center;
      flex-direction: column;
    }
  }

  .devices { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: start; }
  .devices__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--color-ink-lighter); border-radius: 8px; font-size: var(--text-small); }
  .devices__name { font-weight: 600; }
  .devices__when { color: var(--color-ink-medium); }
}