Making text responsive on mobile

Hi there, 

I am inserting this code into a code block on my homepage to add text below my project titles but the new lines of text are not responsive on mobile. 

Can someone please add some code that will make this responsive on mobile screens? Thank you! 

<style>

 .portfolio-title:after{

 white-space:pre; 

 content:"\A Second Line";

 text-transform:titlecase;

}

.grid-item:nth-of-type(1) .portfolio-title:after{ white-space:pre; content:"\A Increasing long term user engagement & promoting habit formation" }

.grid-item:nth-of-type(2) .portfolio-title:after{ white-space:pre; content:"\A Providing flexible ordering services & fostering hobby enjoyment" }

 .portfolio-title:after{

white-space:pre; 

 content:"\A Anything";

  text-transform:titlecase;

  font-family:open sans;

  color:#1b1b1b;

  padding-top:.5rem

}

</style>

Can you share link to portfolio page?

Yes of course! https://www.kaitykuzeljevic.com/

Use this code

<style>
   .portfolio-title:after{

 white-space:pre; 

 content:"\A Second Line";

 text-transform:titlecase;

 

}

 

 

.grid-item:nth-of-type(1) .portfolio-title:after{ white-space:pre; content:"\A Increasing long term user engagement & promoting habit formation" }

.grid-item:nth-of-type(2) .portfolio-title:after{ white-space:pre; content:"\A Providing flexible ordering services & fostering hobby enjoyment" }

 

 .portfolio-title:after{

white-space:pre; 

 content:"\A Anything";

  text-transform:titlecase;

  font-family:open sans;

  color:#1b1b1b;

  padding-top:.5rem

 

}
  @media screen and (max-width:767px) {
   .portfolio-title:after {
     white-space: initial !important;
     font-size: 14px;
     display: block;     
 }
  }
</style>

Hi thank you! 

It looks great on mobile however on desktop the font is a bit too large. Is there a way to decrease it? I tried changing the font size and that did not work. 

Please see the photo below as a reference. 

Thank you! 

Amazing! This looks great. Thank you so much for your help!!