Email displaying small, like a desktop version, only in ios mail

I can't figure out why our emails are displaying like a miniaturized desktop verison in ios mail clients. In ios Outlook and Gmail it seems fine. We are using Salesforce Pardot.

Here's the styling I inherited

<style type="text/css">
/*GENERAL STYLES*/
body {font-family: Arial, sans-serif; font-weight: 400; text-align: center; padding: 0; margin: 0; border: 0;}
p, ul, ol {margin: 0;}
/*EMAIL STYLES*/
.eyebrow {font-size: 12px; line-height: 16px; color: #425563;}
.webversion {font-size: 12px; line-height: 16px; color: #425563;}
.webversion > a {color: #425563 !important; text-decoration: none !important;}
.webversion > a > span {color: #425563 !important; border-bottom: 1px solid #425563;}
/*IMAGERY STYLES*/
.picture, .picture-p {display: block !important;}
.social_icon {width: 28px;}
.cclogo {display: block; width: 200px;}
.ccline {display: block; width: 300px;}
/* TITLE STYLES */
.title-big {font-size: 28px; color: #0073FF; text-transform: uppercase;}
.title-big > a {color: #0073FF; text-decoration: none !important;}
.title-big > a > span {color: #0073FF;}
.title-small {font-size: 18px; color: #425563;}
.title-small > a {color: #425563; text-decoration: none !important;}
.title-small > a > span {color: #425563; border-bottom: 1px solid #425563;}
.title-big-r {font-size: 28px; color: #FFF; text-transform: uppercase;}
.title-big-r > a {color: #FFFFFF; text-decoration: none !important;}
.title-big-r > a > span {color: #FFFFFF;}
.title-small-r {font-size: 18px; color: #FFFFFF;}
.title-small-r > a {color: #FFFFFF; text-decoration: none !important;}
.title-small-r > a > span {color: #FFFFFF; border-bottom: 1px solid #FFFFFF;}
/*BODY STYLES*/
.text-regular, ul {font-size: 14px; line-height: 22px; text-align: left;}
.text-regular > a {font-weight: 600; color: #425563; text-decoration: none !important;}
.text-regular > a > span {font-weight: 600; color: #425563; border-bottom: 1px solid #425563;}
.text-regular-r {font-size: 14px; line-height: 22px; color: #FFF; text-align: left;}
.text-regular-r > a {font-weight: 600; color: #FFFFFF; text-decoration: none !important;}
.text-regular-r > a > span {font-weight: 600; color: #FFFFFF; border-bottom: 1px solid #FFFFFF;}
.text-small {font-size: 12px; line-height: 16px; color: #425563;}
.text-small > a {color: #425563; text-decoration: none !important;}
.text-small > a > span {font-weight: 600; color: #425563; border-bottom: 1px solid #425563;}	
.text-regular > img, .text-regular-r > img, .text-small > img {width: 12px;}
/* RESPONSIVE STYLES */
.mobile-only {display: none;}
@media screen and (max-width: 768px) {
.mobile-only {display: block !important;}
.mobile-hide {display: none !important;}
.rspnsv, .rspnsv > tr {display: block !important; width: 100% !important;}
p {width: 95% !important; padding: 0 2.5% !important;}
.picture {display: block !important; width: 100% !important; height: unset !important;}
.picture-r {display: block !important; width: 95% !important; height: unset !important; padding: 0 2.5% !important;}
.contact_icon, .button {padding-left: 2.5%;}
}
</style>

I've tried a few tricks like adding styling for smaller breakpoints to increase font size to no avail. Why is it displaying like this only in ios Mail?

Typically this is because of an oversized element, and so the email client shrinks everything down to fit it all in.

The usual culprit is an image - make sure it's responsive, i.e. you might add style="max-width:100%;height:auto;" to it.