I'm working on a container that dynamically loads the tabs and items with API requests. I would like to lessen the number of tabs that display with it's being viewed on mobile or tablets. can I do this with media queries? 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;
}