Responsive code not working in Pardot email

Question

I'm trying to create a responsive Pardot template that will rearrange our footer display for phone screens. I've tested it extensively on both the Preview screen on Pardot and on other test sites, and it works. But when I send a test email using the template, it always shows both footers no matter where I view it.

Here's the code in question for the phone display:

  @media only screen and (max-width: 480px){
        body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;}

        body{width:100% !important; min-width:100% !important;}
             
        div.logoBottom-container, div.address-container, div.footer-disclaimer {
        display:none; 
        }         
      }

And here's the HTML for the desktop display, with the three divs (logoBottom-container, address-container, and footer-disclaimer) that aren't supposed to show:

<tr>
                        <td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" width="100%">
                            <tbody>
                                <tr>
                                    <td align="left" style="width:33%;text-align:left;background-color:blue;" valign="top">
                                    <div class="logoBottom-container" style="margin-left:20px;margin-right:10px;margin-top:20px;"><img alt="logo-white.jpg" class="logo-bottom" src="[url removed so this wouldn't be marked spam]" style="width: 80px;"></div>
                                    </td>
                                    <td align="center" style="background-color:red;" valign="top">
                                    <div class="address-container" style="margin:20px;">
                                    <p style="font-family:'MaisonNeue-Light', helvetica, sans-serif;font-size:11px;font-weight:300;text-align:left;line-height:16px;color:#dddddd;">{{{Organization.Address}}}</p>

                                    <div style="margin-top:10px;text-align:left;"><a class="social-button" href="[url removed so this wouldn't be marked spam]"><img alt="Instagram Image" src="[url removed so this wouldn't be marked spam]" style="width: 20px; padding-right: 5px;"></a> <a class="social-button" href="[url removed so this wouldn't be marked spam]"><img alt="FaceBook Image" src="[url removed so this wouldn't be marked spam]" style="width: 20px; padding-right: 5px;"></a> <a class="social-button" href="[url removed so this wouldn't be marked spam]"><img alt="Twitter Image" src="[url removed so this wouldn't be marked spam]" style="width: 20px; padding-right: 5px;"></a> <a class="social-button" href="[url removed so this wouldn't be marked spam]"><img alt="LinkedIn Image" src="[url removed so this wouldn't be marked spam]" style="width: 20px; padding-right: 5px;"></a>

                                    <div class="unsubscribe-container"><a href="[url removed so this wouldn't be marked spam]" style="font-family:'MaisonNeue-Light', helvetica, sans-serif;font-size:11px;font-weight:300;text-align:left;font-style:italic;line-height:15px;margin-bottom:15px;color:#dddddd;">update subscription preferences</a>&nbsp;

                                    <p><a href="{{Unsubscribe}}" style="font-family:'MaisonNeue-Light', helvetica, sans-serif;font-size:11px;font-weight:300;text-align:left;font-style:italic;line-height:15px;margin-bottom:15px;color:#dddddd;">unsubscribe from all emails</a></p>
                                    </div>
                                    </div>
                                    </div>
                                    </td>
                                    <td align="center" style="width:33%; background-color:green;" valign="top">
                                    <div class="footer-disclaimer" style="margin:20px 20px 20px 0;">
                                    <p style="font-family:'MaisonNeue-Light', helvetica, sans-serif;font-size:11px;font-weight:300;text-align:left;font-style:italic;line-height:15px;margin-bottom:15px;color:#dddddd;">Our organisation acknowledges the Traditional Owners of Country throughout Australia and their connection to land, waters and community. We pay our respects to Elders past and present.</p>

                                    <div class="copyright-text">
                                    <p style="font-family:'MaisonNeue-Light', helvetica, sans-serif;font-size:11px;font-weight:300;text-align:left;color:#777777;">© {{Current_Year}} The Big Issue</p>
                                    </div>
                                    </div>
                                    </td>
                                </tr>
                    

I have set code for max-width 480px and for min-width 481px, and set the footer divisions for each one to be invisible (display:none;) when displayed on a screen in the respective other category. I was expecting only one footer or the other to appear, and when testing the code, it works. But it doesn't work when I send a test-email. I'm using Gmail for my test emails, so it's not the usual problem with Outlook stripping the code.