Describe the bug

Changes in 3.7.1 (#5289) cause visual regressions in customized footer components due to specificity conflicts with grid-layout classes.

The grid classes defined in the footer scss take precedence over standard grid classes.

Slack thread with additional context

Steps to reproduce the bug

To reproduce the bug, we'll need to update the footer's grid column value.

1. Visit this footer demo on desktop widths.
   • The first footer link uses desktop:grid-col-8
2. Open devtools and inspect the first primary link li element
3. Review output styles.
   • width is set by .usa-footer .grid-row .mobile-lg:grid-col-4 // 33.33%
   • width should be set by desktop:grid-col-8 // 66.667%
   • mobile-lg:grid-col-4 will take priority because it's definition in footer has higher specificity than layout-grid's desktop:grid-col-8

Expected Behavior

Footer should accept customized layout grid styles when layout-grid package is included.

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.