How to update portfolio navigation but keep the existing theme

Site URL: https://www.oliviacaesar.com/portfolio/cartdotcom-dearest-campaign

Hi there, I'm hoping to find a way to edit the footer navigation that has the user navigate between my different portfolio projects by clicking on the arrows.  But on mobile, each project's titles overlap and are illegible. I'd like to either reduce the size of the project titles or remove them so the mobile experience isn't compromised.  Does anyone know how to do this? The site URL I provided is a portfolio project page that if opened on mobile, you can scroll to the bottom to see what I'm referring to. But here is a screenshot as well for reference. 

Also, on a side note, I'm noticing that on my iPhone 15 Pro Max, my website isn't dynamically populating with the correct aspect ratio. I have to zoom out for the entire mobile experience to be visible even though I've tried to optimize the design for mobile throughout the build (hence this inquiry about the mobile experience). Is that just because the Pro Max is a unique screen size compared to the general mobile size the Squarespace platform uses? 
 

You can use this to Website Tools > Custom CSS to prevent overlap

@media screen and (max-width:767px) {
.item-pagination-title {
        font-size: 16px;
    }
}

Do I just copy it just as you've shared? That doesn't seem to be working.  I appreciate the help!! 

Amazing, thank you so much!!