Footer CSS not working

I am playing with different values, min and max widths and no success.

What I want is this:

At full page width (1140 px), there should be 5 footer widgets in a row with these widths:
30 | 15 | 20 | 20 | 15

At less than 1140, I'd like: 50 | 20 |30 (the 2 other widgets go below at 50/50)

Then (on iPad portrait mode): 40 | 30 | 30 (widtgets 4 + 5 go in a new row below)

On small screens, it should be two columns 50 / 50 and 3 rows to accommodate all 5 widgets.

That's a very complicated layout. I want to improve the footer controls, but this would involve adding waaay too many options. I'll try my best with some CSS:

@media (min-width: 1141px) {
    .active-footer-widgets-5 .footer-widget-1 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-2 {
        width: 15%;
    }

    .active-footer-widgets-5 .footer-widget-3 {
        width: 20%;
    }

    .active-footer-widgets-5 .footer-widget-4 {
        width: 20%;
    }

    .active-footer-widgets-5 .footer-widget-5 {
        width: 15%;
    }
}

@media (max-width: 1140px) {
    .active-footer-widgets-5 .footer-widget-1 {
        width: 50%;
    }

    .active-footer-widgets-5 .footer-widget-2 {
        width: 20%;
    }

    .active-footer-widgets-5 .footer-widget-3 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-4 {
        width: 50%;
        clear: left;
    }

    .active-footer-widgets-5 .footer-widget-5 {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .active-footer-widgets-5 .inside-footer-widgets > * {
        float: left;
    }

    .active-footer-widgets-5 .footer-widget-1 {
        width: 40%;
    }

    .active-footer-widgets-5 .footer-widget-2 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-3 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-4 {
        width: 100%;
        clear: both;
    }

    .active-footer-widgets-5 .footer-widget-5 {
        width: 100%;
    }
}

Thanks Tom,
I tried a lot of different combinations but nothing is ideal.

Your styles behave like mine and I didn't want to force anything with !important

The problem lays with the break points.
I think that it's safe to assume that most users need to have at least two columns to hold the 5 widgets when their pages are viewed on an iPad or similar tablet.

Right now, it looks broken because of all the empty space.

I am almost considering to do this in Elementor and skip the widgets altogether because I see no working solution.

I appreciate the work you have posted here and hope that it will be of use for other people but it's not a final solution for my page. I'll keep digging. Thanks again.

Can you link me to what you have? I added this on my dev install (no !important needed) and it behaved as it should.

Hi Tom,
bad timing. We are in the finishing stages of a new app and I can't really find the time to take care of this now. I'll revisit the issue sometime down the road. Thanks.

No problem!