No, the problem is with your class names .testimonial.vertical .testimonial.horizontal By including those classes in the actual markup you're hard-cod

No, the problem is with your class names .testimonial.vertical .testimonial.horizontal By including those classes in the actual markup you're hard-coding semantics about the presentation of those two elements that may cease to be relevant when the screen changes width. What if when the screen gets sufficiently narrow you want the horizontal layout to actually change to vertical? The breakpoint at which that happens is more closely linked to the size of the element than the global size of the whole screen (which media queries relate to). So the point is that with element queries you're defining modular breakpoints that directly relate to your CSS modules, not the global size of the screen, and you're not polluting/complicating markup with CSS class names that could become non-semantic in drastically differing viewport dimensions.