Is there a way to make "text-align: center;" place the lines in ascending size?

By default, text-align: center; places the lines of content in descending size, like so:

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

p {
  text-align: center;
  width: 20rem;
}

<p>Get your team in sync, no matter your location. Streamline processes, create team rituals, and watch productivity soar.</p>

Is there a way to make it so that the lines of content are displayed in ascending size instead? Here's what I mean:

I've tried playing around with flexbox, widths, different text properties and whatnot but I just can't find a solution.