Different image caption hover setting for mobile and tablet

Working on image caption overlays that are set for hover on desktop, wanting to make them always display on mobile and tablet. Following up on these two related posts:

https://kriesi.at/support/topic/different-image-caption-hover-setting-for-mobile
how to always display on mobile

https://kriesi.at/support/topic/image-caption-setting-for-tablet
how to always display on tablet specifically iPad

In the second post, your team suggested this quick CSS:
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.av-overlay-on-hover .av-image-caption-overlay {
opacity: 1;
}
}

If I correctly understand CSS media queries re min-width and max-width, could the setting just be this?
@media only screen and (max-width: 1024px) {

Won’t that trigger the always-display-the-caption-overlay command on any screen narrower than 1024px? So it would cover iPads and basically all the smartphones on the planet?

Because from the way I understand min-width and max-width, this…
@media only screen and (min-width: 768px) and (max-width: 1024px) {
means the caption-overlay command triggers for screens narrower than 1024px and wider than 768px, but NOT narrower than 768px, so on smartphones, the caption won’t be visible.

Or am I just completely confused? :-(