Combinación de múltiples condiciones en consultas de medios CSS con lógica OR

En consultas de medios CSS, puede ser útil especificar múltiples condiciones usando la lógica "OR" para apuntar a dispositivos con diferentes tamaños o aspectos de pantalla. Si bien el código proporcionado en la pregunta es incorrecto, existe un método sencillo para lograr el resultado deseado.

Para especificar múltiples condiciones con lógica "O", sepárelas con comas:

@media screen and (max-width: 995px), screen and (max-height: 700px) {
  ...
}

Como se explica en la documentación en https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries:

"Las comas se utilizan para combinar múltiples consultas de medios en una sola regla. Cada consulta en una lista separada por comas se trata por separado de las demás. Por lo tanto, si alguna de las consultas en una lista es verdadera, la totalidad. La declaración de medios devuelve verdadero. En otras palabras, las listas se comportan como un operador lógico u."

Con este enfoque, la consulta de medios verifica si el ancho de la pantalla es menor o igual a 995 píxeles o si la altura de la pantalla es menor o igual a 700 píxeles. Si se cumple cualquiera de las condiciones, se aplicarán los estilos especificados en la consulta de medios.