Text cuts off in different window size

I'm new to all this so I appreciate your help!

What I want it to look like

When window gets smaller

Here's the CSS I used:

.typeit {
  overflow-x: auto; /* Allow horizontal scrolling */
  font-size: calc(45px + 2vw); /* Smaller base size with responsive scaling */
  font-weight: bold;
  padding: 2vh 4vw;
  
  border-right: 2px solid #50bdb8;

  white-space: nowrap; /* Keeps text on a single line */
  text-align: center;
  margin: 0 auto; 
  max-width: 90%;
  
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; }
}

And this is the code block I added to my page:

<div class="typeit"> Growing Your Audience Begins Here.</div>

I want to make it responsive so I tried font-size: calc(45px + 2vw); but it's not working.

When using responsive font sizes, I use max() to prevent it getting too small to read on narrow screens.

Make sure you use the full page link to get the full effect.

.d1 {
  font-size: max(10px, 4vw);
  font-weight: bold;
  text-align: center;
}

<div class="d1"> Growing Your Audience Begins Here.</div>