Change footer widget widths on tablet (portrait)

Hello, I am trying to change the width of my footer widgets at 1024px(?) or tablet portrait mode. There are 4 widgets in total and on portrait view I'd like them to display two wide, with the first footer widget at 60% and the second at 40% and then the other 2 stacked below those each at 50%.

This is the code I am trying but I am missing something as it doesn't seem to do anything right now... Thank you for your help.

@media( max-width: 1024px ) { .footer-widgets .footer-widget-1 {
flex-basis: 60%; padding-right: 40px;
}}

@media( max-width: 1024px ) { .footer-widgets .footer-widget-2 {
flex-basis: 40%;
}}