Mobile first using Sass

Hello, everyone! This was my first project here and I had lots of fun. My question is about the text formatting as in, in how many lines the text is display as, or, where the lines break. I tried a few things like using the white-space property and the html <pre> tags. I'm not looking for a super detailed answer(although those would be greatly appreciated ) , just some pointers as to how I could've done it. So my question is, how could I have have achieved the same result without using the <br> tags? Thank you so very much for your time!

Here's my html:

<div class="body">
<p class="p-main">
                  Discover the benefits of data<br />
                  analytics and make better decisions<br />
                  regarding revenue customer<br />
                  experience, and overall efficiency.
                </p>
<p class="p-main-large">
                  Discover the benefits of data analytics and make <br />better
                  decisions regarding revenue customer<br />
                  experience, and overall efficiency.
                </p>
              </div>

Then, I have a media query that "swaps" from one paragraph to the other when it gets to a certain size, by using the display property. I'm not proud of this solution, but I did what I could.

My sass

.p {
  &-main {
    color: $secondary-white;
    line-height: 1.5;
    // I really don't like this solution to obtain the right text formatting
    // See mark up*
    &-large {
      display: none;
      color: $secondary-white;
      line-height: 1.5;
      @include mq("huge") {
        display: block;
      
      }
    }
    @include mq("huge") {
      display: none;
    }
  }
  &-stats {
    color: $tertiary-white;
    text-transform: uppercase;
    margin-top: 8px;
  }
}