Declaring CSS properties to display images across multiple screen sizes - html

Question

I am using media queries to adjust the size of images according to the screen size they will be displayed at. I am creating 5 breakpoints.
Here is a link to what I have created so far, and here is a link to the repository of the files for the project.
I'm using Google Chrome DevTools to check how the project looks.
Everything runs well on desktop, iPad Pro, and all phone screens as you can see here:
iPad Pro display
Pixel 2 display
But one of the iPad options does not get rendered properly when I use media queries. Here is the anomaly: the image is not sized property and gets stretched.
iPad display
If I fix the iPad, the media query for iPad Pro becomes unresponsive and gets automatically displayed too wide. If I fix the iPad Pro, then the iPad one becomes unresponsive and gets displayed too wide or not at all.
I am using Visual Studio Code and there I have created three CSS files: index.html along with main.css, main1.css and main2.css.
To do that with the image, this is my html code:
<img class="img" src="logo1.png"
alt="My business' website logo"/>
<img class="imagerkan" id="imagery" src="logo1.png"
alt="My business' website logo"/>
This is my CSS at main.css:
#media screen and (min-width: 85.375rem) {
.img {
display: block;
margin-top: 7%;
margin-left: auto;
margin-right: auto;
height: 29.875rem;
width: 31%;
border-radius: 1.25rem;
}
#imagery {
display: none;
}
.imagerkan {
display: none;
}
}
#media screen and (max-width: 64rem) {
.img {
display: block;
margin-top: 21%;
margin-left: 17%;
margin-right: auto;
height: 11.875rem;
width: 68%;
border-radius: 1.25rem;
}
#imagery {
display: none;
}
.imagerkan {
display: none;
}
}
However, when I get to this next part, everything crumbles for one of the iPads:
main1.css:
#media only screen and (min-width: 64rem) and (max-width: 85.375rem) {
#imagery {
display: block;
margin-top: 14%;
margin-left: auto;
margin-right: auto;
height: 29.875rem;
width: 61%;
border-radius: 1.25rem;
}
.img {
display: none;
}
.imagerkan {
display: none;
}
}
This produces my intended outcome on iPad Pro.
But when I want to use another media query so my image displays correctly on iPad, the 768 x 1024 size, nothing I do works. I get the distorted image posted earlier.
The only reason I created an additional css file was because I was having the same problem with the iPad Pro version when I was including the media query for it in main.css. But when I created main1.css and placed my media query there for iPad Pro there, it worked.
At first I had the media query for iPad the 768 x 1024 size, in main1.css,
but thinking that just like having created main1.css for the iPad Pro
media query fixed the problem for it, I made main2.css for the iPad
media query. This time it did not work.
Here's main2.css.
#media only screen and (min-width: 51.5rem) and (max-width: 64rem) {
(824PX , the largest of the 7 phone sizes) (1024PX)
.imagerkan {
display: block;
margin-top: 14%;
margin-left: auto;
margin-right: auto;
height: 29.875rem;
width: 5%;
border-radius: 1.25rem;
}
.img {
display: none;
}
#imagery {
display: none;
}
}
I tried changing the media query for all phones in main.css to max 51.5 rem but this did not fix the problem either. One of the iPad media queries becomes unresponsive.