5. Check if the user is using a mobile device or not, load and display the proper image size accordingly.
>>I have done this changes

right now we have following registered image size

==========================
Array
(
[thumbnail] => Array
(
[width] => 150
[height] => 150
[crop] => 1
)

[medium] => Array
(
[width] => 300
[height] => 300
[crop] =>
)

[medium_large] => Array
(
[width] => 768
[height] => 0
[crop] =>
)

[large] => Array
(
[width] => 1024
[height] => 1024
[crop] =>
)

[1536×1536] => Array
(
[width] => 1536
[height] => 1536
[crop] =>
)

[2048×2048] => Array
(
[width] => 2048
[height] => 2048
[crop] =>
)

[post-thumbnail] => Array
(
[width] => 800
[height] => 9999
[crop] =>
)

[full-width-thumb] => Array
(
[width] => 1200
[height] => 9999
[crop] =>
)

[wpforge-logo] => Array
(
[width] => 1200
[height] => 9999
[crop] =>
)

)
==========================

I have used ‘large’ for mob and tab, ‘1536×1536’ for desktop

I tried different sizes for the mob/tab and desktop spend some time checking but finally, I decided above two because some are larger than needed and some are smaller than needed so look blurry
let me know if any issues.

I have done for post and page according to your Tech specs

Note:-
for the page, you need to set page Featured image from the default editor https://prnt.sc/ZUSGxYld6kWo

I have noticed you are giving the banner image from the element https://prnt.sc/xcDDFgZGzdy8
please do not add a banner image from the elemntor