Estoy trabajando en un contenedor que carga dinámicamente las pestañas y los elementos con solicitudes de API. Me gustaría disminuir la cantidad de pestañas que se muestran cuando se está viendo en dispositivos móviles o tabletas. ¿Puedo hacer esto con consultas de medios? CODEPEN

 <div id="catTabs" class="tab"><button class="tabTest" value="Moonwalks and Bounce Houses">Moonwalks and Bounce Houses</button><button value="Water Slides">Water Slides</button><button value="Obstacle Courses">Obstacle Courses</button><button value="Tents Tables and Chairs">Tents Tables and Chairs</button><button value="Carnival Games">Carnival Games</button><button value="Concession and Catering">Concession and Catering</button><button value="Concession Supplies">Concession Supplies</button><button value="Advertising and Promotion">Advertising and Promotion</button></div> .tab { display: flex; overflow: hidden; border-bottom: 1px solid black; border-top: 1px solid black; background-color: #efefef; padding: 0px; margin: auto; }