Blocs Portrait & Landscape Breakpoints

Any web designers, what do you think about this?
Example: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Let’s start with a full page responsive (Hero) image with no padding or margins. Consider the 4- Breakpoints (Bootstrap 4) or the 4-Viewports. When designing this, what is the optimal Width & Height in pixels that should be used? How do you determine the Height? Is that not important?
Here is what I came with, please advise on any corrections.

DESKTOP - iMac 27" 2560 X 1600

LAPTOP - MacBook Pro 15 1680 X 1200

TABLET - Samsung 10" Tab 800 x 1280

MOBILE - iPhone 8 Plus 414 X 896


Here is the conclusions I found in my search. None of these give the height and I could not find what to use. Also the max-width does not consider a 4K Screen

Do we need to make another image and add @media query for a device when the viewer changes from Landscape to Portrait? How does Blocs handle this?

The Standard Bootstrap 4.x Breakpoints
@media all and (max-width: 1199px) { … }
@media all and (max-width: 991px) { … }
@media all and (max-width: 768px) { … }
@media all and (max-width: 575px) { … }

I appreciate anyone help in this matter. :smile: