responsive with 2 conditions?

Hello I have a component to change sizes when the browser is resized, I added a width range on my css and is working, but there is a problem when the heigh of the browser changes, i think I can solve this if I use 2 conditions on my media query(?), on the media queryes you can do that with the operator ‘and’ but I dont know how to do this on vaadin.

example:

&[width-range~=“990px-1200px”]
and [height-range~=“640px-768px”]
{

.v-horizontallayout-panelspacing{ height:250px; }

}