I am using media queries and there are two resolutions for phones i am focusing

(smartphone 412 * 915 ) (smartphone 385 * 854 ) but the issue i am facing is that both are overlapping whats the issue?

@media only screen and (min-width: 412px) and (max-width: 915px) { /* smartphone (2) --- (smartphone 412 * 915 ) --- ---- (actual 412 * 915 ) --- */

body { background-color: rgb(234, 149, 149); /* portrait color */ }

@media only screen and (orientation: landscape) { /* Styles specifically for landscape orientation */

body { background-color: #F4F4F4 !important; /* landscape color */ } }

}

@media only screen and (min-width: 384px) and (max-width: 854px) { /* smartphone (1) --- (smartphone 385 * 854 ) --- ---- (actual 385 * 854 ) --- */

body.index-page.is-smartphone { background-color: #a3d093; /* portrait color */ }

@media only screen and (orientation: landscape) { /* Styles specifically for landscape orientation */

body { background-color: purple !important; /* landscape color */ }

}

}

I expected to apply distinct styles for each resolution without any overlap. However, I am facing an issue where both resolutions are overlapping in their styles, causing conflicts.