@layer components {
  .name-fields {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .name-fields {
      gap: 3rem;
    }
  }
  .name-fields__row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .name-fields__row {
      flex-direction: row;
      align-items: flex-start;
      gap: 1.5rem;
    }
    .name-fields__row > * {
      flex: 1;
    }
  }
}