Creo que lo que vas a tener que hacer es simplificar tu problema, mostrando al menos dos cuadros (uno bueno y el malo) e ir purgando tanto css como html, para que se pueda ver el problema mejor.
A mi por ejemplo me cuesta entender el sentido de tu html y css, por ejemplo ver esto y no saber el porqué de las dos media querys
Código CSS:
Ver original@media (min-height: 200px) and (max-height: 800px) {
.maestro{width: 560px;height: 560px; }
}
@media (min-height: 0px) and (max-height: 200px) {
.maestro{width: 560px;height: 560px; }
Las mismas dimensiones para .maestro para mestro si tiene una altura menor o igual de 200 o si tiene desde 200 hasta 800 de altura.
Como para ponerse a mirarlo detenidamente.