Ne pas afficher contenu d'un <li> en fonction de la taille d'

Bonjour à tous,

Ma balise <ul> est constitué de plusieurs <li> sur la même ligne.
Mon problème se pose lors de l'affichage du site sur mobile.
La dernière balise <li> déborde, j'aimerai donc pouvoir choisir le nombrez de <li> à afficher en fonction de la résolution d'écran.

<ul class="block-selection">
      <li class="product">Contenu 1</li>
      <li class="product">Contenu 2</li>
      <li class="product">Contenu 3</li>
      <li class="product">Contenu 4</li>
<li class="product">Contenu 5</li>
<li class="product">Contenu 6</li>
      </li>  
</ul>

.block-selection{
    list-style-type:none;
    padding:0;
    margin:25px 0 40px;
}
.product{
        display:inline-block;
        width:calc(100% / 7);
        margin-right:2.1%;
    }

Merci d'avance pour votre aide !
Yo