Changing number of cards based on device orientation

Is there a way to change the number of cards being displayed when the layout changes? Say if in portrait I have 3 cards, and in landscape I need 4 cards, what should I do to achieve this within a template?

likely just need to use media queries for this. something like:
@media (orientation: landscape)