Migrate useMediaQuery hooks

[jonkafton]

What are the relevant tickets?

Fixes https://github.com/mitodl/hq/issues/5471

Description (What does it do?)

Replaces all uses of useMuiBreakpointAtLeast() with css-only media queries. The reason is that the hook uses window.matchMedia(), which is not availalbe in the server for server rendered content.

Also fixes css issues with the headings in the homepage Testimonials and News / Events that I noticed (present in RC and Prod).

Whitelists all image URLs in the config.

Screenshots (if appropriate):

How can this be tested?

Load the homepage.

• The News and Events section should appear and behave as on prod at all screen widths.

Load the search page

• The search results should display the mobile loading state as smaller screen widths and the desktop loading state at larger screen widths

Additional Context

[ChristopherChudzicki]

Could you undo this change to Testimonials page? To avoid conflicts with #1568

[ChristopherChudzicki]

I also see two usages of useMuiBreakpointAtLeast remaining:

• frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx
• frontends/ol-components/src/hooks/useBreakpoint.ts

Additionally, it might be good to add

          {
            name: "@mui/material/useMediaQuery",
            message: "Use CSS instead; with SSR, useMediaQuery can cause an initially different styling. ",
          },

to the @typescript-eslint/no-restricted-imports rule in eslintrc

[jonkafton]

I also see two usages of useMuiBreakpointAtLeast remaining:

Urrg sorry, this branch was missing a cherry pick after rebase / cleanup. Let's revisit our approach of rebasing main onto the nextjs. I'm increasingly thinking its not viable.